Question

我有这个非常讨厌的问题，我过去几天试图弄清楚。我甚至已经在Stackoverflow上阅读了所有可能的解决方案，但没有任何效果！

我的HTML代码中包含此代码：

<div id="picture">
   <div class="picture-1"></div>
   <div class="picture-2"></div>
   <div class="picture-3"></div>
</div>

我的CSS中的代码：

#picture {
height: 250px;
border-top: 1px solid #ffefaf;
border-bottom: 2px solid #ffffff;
clear: both;
}

.picture-1 {
background: transparent url('images/view.png') left top no-repeat;
}

.picture-2 {
background: transparent url('images/plant.png') left top no-repeat;
}

.picture-3 {
background: transparent url('images/view.png') left top no-repeat;
}

图片在右侧文件夹中，名称是正确的，但它们不起作用。可能是什么问题？

Answer 1

您的图片DIV没有尺寸。它们不会自动将其大小设置为图像，就像IMG标记一样。您需要使用width:和height:在CSS中设置此内容。

Answer 2

我认为问题是你的内部div没有大小，所以他们尝试将以下行添加到你的css中：

#picture  > div {
    width: 200px;
    height: 200px;
}

Answer 3

添加#picture div{height: 250px;}

Js小提示你的答案 - ＆gt; http://jsfiddle.net/niteshp27/xkLd7/

背景图片不起作用

3 个答案: