css顯示不出背景的解決方法:1、查看css是否被調用,重新調用正確的css路徑;2、檢查css圖片地址並修改正確;3、固定div的高度;4、檢查div是否被嵌套並修改;5、規範div程式碼即可。
本教學操作環境:Windows10系統、CSS3版、DELL G3電腦
css顯示不出背景怎麼辦?
div背景圖片或顏色不顯示的解決方法
背景圖片不顯示的原因主要有以下幾個面向:
# 1. css沒有被呼叫
2. css圖片位址不對
3. div的高度沒有固定,是auto、沒有設值或高度不夠
4. div被巢狀
5. div程式碼不規範
解決方法:
- DIV高度為自動,背景顏色無法顯示,在程式碼中將原代碼height:auto; 改為height:100%; overflow:hidden;!important;同時還可以相容於IE6、7、8和Google火狐。
- 假設對一個物件設定了background背景顏色樣式,該物件內部盒子有使用float浮動屬性樣式,這個時候該物件浮動產生,導致該物件不能撐開,所以css背景顏色就不能無法顯示,解決方法有三種,一個是設定clear清除浮動、設定css高度、設定css overflow樣式。
- 高度限製造成了背景顏色不能顯示完整,假如你有個物件沒有計算好高度(或無意設定了一個很小高度屬性樣式),因為不確定內容有多少,當內容超過你設定高度限制,這個時候超出部分背景就可能無法顯示。設定夠高的高度,或取消刪除高度樣式即可。
案例:
<div style="width:960px;background-color:#000000"> <div style="width:300px; height:200px; float:left">左侧</div> <div style="width:300px; height:200px; float:left">中部</div> <div style="width:360px; height:200px; float:left">右侧</div> </div>
因為外層的div沒有設定高度,所以設定如上程式碼之後,看到的是三個透明的方框,
正確程式碼如下:
<div style="width:960px; height:200px;background-color:#000000"> <div style="width:300px; height:200px; float:left">左侧</div> <div style="width:300px; height:200px; float:left">中部</div> <div style="width:360px; height:200px; float:left">右侧</div> </div>
推薦學習:《css影片教學》
以上是css顯示不出背景怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!