CSS的背景图片

Question

为什么背景图片不起作用

演示

的HTML

<div class="container" style="background-color: red;"></div>

的CSS

.container {
  width: 100%;
  height: 385px;
  background-image: url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
  background-position: center top;
  background-size: 100% auto;
  background-size: cover;
  border-bottom: 1px solid #3f4858;
  background-repeat: repeat-x;
  left: 0px;
  top: 0px;
}

Answer 1

除了已经提到的拼写错误

---

这里的问题是容器的大小和背景图片的大小。 您的图片顶部有很多空间，您看不到容器大小的任何东西。 检查是否将background-size属性更改为：

背景大小：100％100％；

演示版

对于多变的背景大小，您还可以使用contain ：

在确保背景图片的尺寸均小于或等于背景定位区域的相应尺寸的同时，背景图片应缩放到尽可能大的比例

另一个演示

Answer 2

您的width: 100%取决于父元素的宽度。 和它没有设置。 这就是为什么。 因此，将您的CSS更改为：

.container{
  width:300px;
  height:385px;
  background-image:url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
  background-position: center top;
  background-size: 100% auto;
  background-size:cover;
  border-bottom:1px solid #3f4858;
  background-repeat:repeat-x;
  left:0px;
  top:0px;
}

以及为什么要使用HTML style="background-color:red;" ？ 您是否想要将png_grass_by_moonglowlilly-d5z1o5t.png作为背景图像或红色？ 或者您想让该PNG图片具有红色的透明度？

演示

Answer 3

尝试这个：

 .container{ width:300px; height:385px; background-image:url('http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png'); background-position: center top; background-size: 100% auto; background-size:cover; border-bottom:1px solid #3f4858; background-repeat:repeat-x; left:0px; top:0px; } 

 <div class="container" style="background-color:red;"> 

Answer 4

图片的大小为1024x819px，草从顶部开始为232px ，因此您需要放置背景图片或更改div.container的大小，以使图片适合给定的大小。

演示1，容器大小已更改：

演示1

演示2的图像位置仅在您的代码段中更改过：

演示2

只是注意到背景位置我已经更改为0px -232px;