HTML：不顯示背景圖片

Question

我希望我的特定div具有其自己的特定背景，寬度為100％，因此它覆蓋了整個div ，為什么背景圖片不顯示。 看這里

Answer 1

您需要添加height和width屬性，以便使用背景圖像。

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

這是一個工作版本的小提琴

您應該重新考慮使用其他字體顏色;-)

Answer 2

元素與id=counter1沒有內容*（ float移動元素了公文流轉），div的高度為0，它的理由，為什么你沒有看到backgrond圖像。

#counter1 {overflow: hidden}

http://jsfiddle.net/hus​​pk2j1/9/

*）檢查此小提琴http://jsfiddle.net/hus​​pk2j1/11/ ，我在#counter1上添加了border: 1px solid blue以顯示它為空。

Answer 3

基本上是因為浮動計數器不會導致其父項正確計算高度。 您可以使用overflow: hidden屬性解決此問題。

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

http://jsfiddle.net/hus​​pk2j1/8/

Answer 4

為了解決這個問題，您只需在容器的末尾添加一個帶有clear: both的元素即可。

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

Answer 5

加

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

給你的CSS。

看到http://jsfiddle.net/hus​​pk2j1/12/