HTML：背景图像不显示答案

【问题标题】：HTML: background-image not displayingHTML：背景图像不显示
【发布时间】：2014-10-27 21:25:24
【问题描述】：

我希望我的一个特定的div 有自己的特定背景，宽度为 100%，所以它覆盖了整个div，为什么不显示背景图像。 See here

【问题讨论】：

【解决方案1】：

您需要添加 height 和 width 属性才能使用背景图像。

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

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

【讨论】：

您好，谢谢您的回答，如果可以的话，只是一个很小的问题。我想让我的图片的宽度在整个网站上都是 100%，并且不会重复。但是每次我这样做只会覆盖 25% 的网站，你认为你知道答案吗？ See here
也许这可以帮助你：stackoverflow.com/questions/235855/…

【解决方案2】：

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

#counter1 {overflow: hidden}

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

【讨论】：

【解决方案3】：

基本上是因为浮动计数器不会导致其父级正确计算高度。您可以使用 overflow: hidden 属性解决此问题。

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

【讨论】：

【解决方案4】：

为了解决这个问题，您只需在容器末尾添加一个带有 clear: both 的元素。

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

【讨论】：

【解决方案5】：

添加

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

到你的CSS。

【讨论】：