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 - 微信報redirect_uri參數錯誤2. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？3. android - 類似微信朋友圈或者QQ空間說說那種點擊圖片放大，并且有放大縮小手勢，左右滑動圖片手勢效果4. java - Atom中文問題5. java - 初學SSM 在import自己寫的包下的類的時候飄紅，求大神解答？6. 網頁動畫等過渡效果，CSS3 transitions 和 jQuery animations 誰實現的性能更好？7. angular.js - angular中的a標簽不起作用8. javascript - 怎么簡寫這段jQuery功能？9. javascript - 如何計算字符串寬度？10. win10系統 php安裝swoole擴展
網公網安備