css - body 的 background 位置
問題描述
http://runjs.cn/code/p2tvxwsj
代碼如下:為什么 body 的 background 位置不在 border之內
<!DOCTYPE html><html><head>
<style> body{ background-image: url(’http://www.w3cschool.cn/statics/images/course/img_flwr.gif’); background-size:100% 100%; background-repeat:no-repeat; width:300px; height:60px;border:solid;} </style>
</head><body></body></html>
問題解答
回答1：因為在所有html標簽中，body的background最特別，與其它的標簽背景計算方法都不一樣；可能W3C當時做瀏覽器和html語言時就是故意把body設計的復雜一些，起到統領全局的作用；我的建議是，把這些特殊的地方背誦記住避免以后出問題時找不到bug源頭；總結一下body的background有兩個奇怪的地方：1、你可以試著給body一個紅色背景色，會發現全屏寬、全屏高都鋪滿了紅色；2、給body設置 margin:50px auto; 居中后，發現背景色和背景圖片都是從最左邊到最右邊寬度百分百，背景色的高度也是百分百；在你的代碼基礎上做了修改，你看下：http://runjs.cn/code/jwwcoan0
回答2：以前回答過的答案：body特殊性
回答3：果然, 之前也沒有碰到過這樣的問題!
試了下!
如果html的background-image值為none(默認值為:none), background-color值為transparent(默認值為: transparent), 那么瀏覽器就會向body借用這兩個屬性值來對html設置background-image或background-color屬性.
<style type='text/css'>html{ background-color: transparent;}body{ width: calc(100% - 100px); height: 300px; background-color: red; margin: 50px;} </style>
例如上面的代碼, 若不做改動效果如下:
若改動html中background-color屬性值為有效值, 如: #fafafa.將會得到如下效果:
希望對你有所幫助!
相關文章：
1. mysql - 這條聯合sql語句哪里錯了2. webpack - vuejs+java前后臺分離實現及部署問題3. docker鏡像push報錯4. javascript - 微信h5發送圖文信息，部分設備點擊“發送”按鈕時沒反應，問題較難重現，如何能找到可能存在問題的點？5. 網站在移動的環境下手機，pc打不開6. php - TP5的登錄驗證問題7. mysql - 我的myeclipse一直連顯示數據庫連接失敗，不知道為什么8. javascript - echart+百度地圖9. javascript - 微信小程序picker為什么會變成兩行？10. linux pdo 安裝配置中 make 遇到問題，請大家指教！
網公網安備