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. css3 - border-bottom 的長度可否超過盒子的寬度呢？實現如下圖效果。（我的書下面的線）2. 對mysql某個字段監控的功能3. showpassword里的this 是什么意思？代表哪個元素4. mysql優化 - mysql EXPLAIN之后怎么看結果進行優化 ？5. html - vue項目中用到了elementUI問題6. JavaScript事件7. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?8. javascript - js中向下取整9. mysql scripts提示 /usr/bin/perl: bad interpreter10. python - 為什么正常輸出中文沒有亂碼，zip函數之后出現中文編程unicode編碼的問題，我是遍歷輸出的啊。
網公網安備