HTML：不顯示背景圖像

我想要我的具體的div有它自己的具體背景，寬度爲100％，所以它覆蓋了整個div，爲什麼不顯示背景圖像。 See here HTML：不顯示背景圖像

2014-10-27 arrey

您需要添加高度和寬度屬性才能使用背景圖像。

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

here is a fiddle with a working version

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

來源

2014-10-27 12:51:57

你好，謝謝你的回答，只是一個很小的問題，如果我可以。我想讓我的照片在整個網站上都保持100％的寬度，並且不再重複。然而，每次我這樣做，它只會覆蓋25％的網站，你認爲你知道答案嗎？ [見這裏]（http://jsfiddle.net/huspk2j1/14/） – arrey 2014-10-28 14:12:27

也許這可以幫助你： http://stackoverflow.com/questions/235855/how-do-i-stretch-a-background- image-to-cover-the-entire-html- – 2014-10-28 14:14:36

謝謝，它的確如此。 – arrey 2014-10-28 14:21:46

元素與id=counter1沒有內容*（float移動元素了公文流轉），div的高度爲0，它的原因爲什麼你看不到背景圖像。

#counter1 {overflow: hidden}

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

*）檢查這個小提琴http://jsfiddle.net/huspk2j1/11/，我已經添加到border: 1px solid blue向#counter1告訴你它是空的。

來源

2014-10-27 12:53:22 panther

基本上，因爲浮動計數器不會導致它的父級正確計算高度。您可以使用overflow: hidden屬性修復此問題。

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

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

來源

2014-10-27 12:53:41 Hless

-1

添加

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

到你的CSS。

見http://jsfiddle.net/huspk2j1/12/

來源

2014-10-27 13:00:13 MIvanIsten

爲了解決這個問題，你可以用clear: both在你的容器的末尾簡單地添加元素。

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

來源

2014-10-27 13:25:24 SmartDev

你需要更多的標記。我認爲'overflow'方法更清潔。 – Hless 2014-10-27 13:50:54

HTML：不顯示背景圖像

回答

相關問題