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>
因為在所有html標籤中，body的background最特別，與其它的標籤背景計算方法都不一樣；
可能W3C當時做瀏覽器和html語言時就是故意把body設計的複雜一些，起到統領全局的作用；我的建議是，把這些特殊的地方背誦記住避免以後出問題時找不到bug源頭；
總結一下body的background有兩個奇怪的地方：
1、你可以試著給body一個紅色背景色，會發現全螢幕寬、全螢幕高都鋪滿了紅色；
2、給body設定margin:50px auto; 居中後，發現背景色和背景圖片都是從最左邊到最右邊寬度百分百，背景色的高度也是百分百；
在你的程式碼基礎上做了修改，你看下：
http://runjs.cn/code/jwwcoan0
以前回答過的答案：
body特殊性
果然, 之前也沒有碰到過這樣的問題!
試了一下!
如果html的background-image值為none(預設值為:none), background-color值為transparent(預設值為: transparent), 那麼瀏覽器就會向body借用這兩個屬性值來對html設定background-image或background-color屬性.
例如上面的程式碼, 若不做改動效果如下:
若改動html中background-color屬性值為有效值, 如: #fafafa.將會得到如下效果:
希望對你有幫助!