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. javascript - 使用form進行頁面跳轉，但是很慢，如何加一個Loading？2. python 計算兩個時間相差的分鐘數，超過一天時計算不對3. javascript - JS 里面的 delete object.key 到底刪除了什么？4. javascript - ES6規范下 repeat 函數報錯 Invalid count value5. angular.js - 輸入郵箱地址之后， 如何使其自動在末尾添加分號？6. angular.js - angularjs 注入模塊報錯 很怪異... 求解惑7. html5 - 為什么使使用vue cli 腳手架，post-css 沒有自動對css3屬性自動添加瀏覽器前綴呢？8. javascript - html5的data屬性怎么指定一個function函數呢？9. java如何生成token？10. javascript - 后臺管理系統左側折疊導航欄數據較多，怎么樣直接通過搜索去定位到具體某一個菜單項位置，并展開當前菜單
網公網安備