Question

我有身体的背景图片。

CSS：

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  font-family: DaxOT, Helvetica, Arial, sans-serif;
  background-image: url("background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-color:#f00;
  font-size: 16px;
}

图像未覆盖整个页面。（就像它应该与背景大小：封面）身体大小合适。你会看到左边和右边的红色区域。 IE和Firefox会产生这种效果。

段：

<html>
  <head>
    <meta charset="UTF-8">
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
      }
      html {
        width: 100%;
        height: 100%;
        min-height:100%;
        min-width:100%;
      }
      body {
        min-height:100%;
        min-width:100%;
        font-family: DaxOT, Helvetica, Arial, sans-serif;
        background-image: url("https://picload.org/thumbnail/darlclgr/fond_blau-verlauf.jpg");
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        background-attachment: fixed;
        background-color:#f00;
      }
    </style>
  </head>
  <body></body>
</html>

Answer 1

尝试添加高度

width: 100%;
height: 100%;

为此，你需要在html和body中添加高度。像：

html, body{
min-height:100%;
min-width:100%;
}

如果这不起作用，请将其添加到正文：

-webkit-background size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size:cover;

背景图片不覆盖整个身体

1 个答案: