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 - react+百度地圖2. html5 - iOS的webview加載出來的H5網頁，怎么修改html標簽select的樣式字體？3. vue.js - vue+webpack+vue-router 部署到nginx服務器下，非根目錄，前后端怎樣配置文件？4. javascript - 為什么當index等于5的時候，不在當前頁面跳轉到百度？不跳轉的代碼在倒數第五行5. angular.js - 關于angular react vue 我們在什么實際的開發項目中使用？如何選擇？6. 手動啟動mysql服務出錯，1067錯誤，如何解決呢?7. index.php錯誤，求指點8. 這是什么情況？？？9. 請教一條mysql的sql語句寫法；10. 跟著課件一模一樣的操作使用tp6,出現了錯誤
網公網安備