HTML：不显示背景图像

Question

我希望我的特定div具有自己的特定背景，宽度为100％，因此覆盖了整个div，为什么赢得了背景图片节目。 See here

Answer 1

您需要添加高度和宽度属性，以便使用背景图像。

#counter1 {
    background-image: url(http://i.imgur.com/7NMEPIo.jpg);
    width:600px;height:340px;
}

here is a fiddle with a working version

您应该重新考虑使用其他字体颜色; - ）

Answer 2

带id=counter1的元素没有内容*（float移出文档流中的元素），div的高度为0，这就是为什么你看不到背景图像的原因。

#counter1 {overflow: hidden}

http://jsfiddle.net/huspk2j1/9/

*） 检查这个小提琴http://jsfiddle.net/huspk2j1/11/，我已将border: 1px solid blue添加到#counter1以显示它是空的。

Answer 3

基本上是因为浮动计数器不能让它的父母正确计算身高。您可以使用overflow: hidden属性修复此问题。

#counter1 {
    background-image:url(http://i.imgur.com/7NMEPIo.jpg);
    overflow: hidden;
}

http://jsfiddle.net/huspk2j1/8/

Answer 4

为了解决此问题，您只需在容器末尾添加clear: both元素即可。

请在此处查看更新的代码：http://jsfiddle.net/aksruLLh。

Answer 5

添加

#counter1:after {
    clear: both;
    content: "";
    display: table;
}

到你的CSS。

请参阅http://jsfiddle.net/huspk2j1/12/