css - body 的 background 位置
問題描述
http://runjs.cn/code/p2tvxwsj
代碼如下:為什么 body 的 background 位置不在 border之內(nèi)
<!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：因?yàn)樵谒衕tml標(biāo)簽中，body的background最特別，與其它的標(biāo)簽背景計(jì)算方法都不一樣；可能W3C當(dāng)時(shí)做瀏覽器和html語言時(shí)就是故意把body設(shè)計(jì)的復(fù)雜一些，起到統(tǒng)領(lǐng)全局的作用；我的建議是，把這些特殊的地方背誦記住避免以后出問題時(shí)找不到bug源頭；總結(jié)一下body的background有兩個(gè)奇怪的地方：1、你可以試著給body一個(gè)紅色背景色，會(huì)發(fā)現(xiàn)全屏寬、全屏高都鋪滿了紅色；2、給body設(shè)置 margin:50px auto; 居中后，發(fā)現(xiàn)背景色和背景圖片都是從最左邊到最右邊寬度百分百，背景色的高度也是百分百；在你的代碼基礎(chǔ)上做了修改，你看下：http://runjs.cn/code/jwwcoan0
回答2：以前回答過的答案：body特殊性
回答3：果然, 之前也沒有碰到過這樣的問題!
試了下!
如果html的background-image值為none(默認(rèn)值為:none), background-color值為transparent(默認(rèn)值為: transparent), 那么瀏覽器就會(huì)向body借用這兩個(gè)屬性值來對(duì)html設(shè)置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>
例如上面的代碼, 若不做改動(dòng)效果如下:
若改動(dòng)html中background-color屬性值為有效值, 如: #fafafa.將會(huì)得到如下效果:
希望對(duì)你有所幫助!
相關(guān)文章：
1. 數(shù)組按鍵值封裝！2. java - web項(xiàng)目中，用戶登陸信息存儲(chǔ)在session中好 還是cookie中好，取決于什么？3. angular.js - webpack build后的angularjs路由跳轉(zhuǎn)問題4. pdo - mysql 簡單注入疑問5. mysql - SQL分組排序、隨機(jī)問題？6. Mysql取下一條記錄7. 老師，怎么不講一次性添加多個(gè)數(shù)據(jù)8. mac mysql 5.7.9 編碼修改無效9. mysql 新增用戶 主機(jī)名設(shè)定 失敗10. mysql - 查詢字段做了索引為什么不起效,還有查詢一個(gè)月的時(shí)候數(shù)據(jù)都是全部出來的，如果分拆3次的話就沒問題，為什么呢。
網(wǎng)公網(wǎng)安備