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;