简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

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>

巴扎黑巴扎黑2741 天前808

全部回覆(3)我來回復

  • PHP中文网

    PHP中文网2017-04-17 14:56:09

    因為在所有html標籤中，body的background最特別，與其它的標籤背景計算方法都不一樣；
    可能W3C當時做瀏覽器和html語言時就是故意把body設計的複雜一些，起到統領全局的作用；我的建議是，把這些特殊的地方背誦記住避免以後出問題時找不到bug源頭；
    總結一下body的background有兩個奇怪的地方：
    1、你可以試著給body一個紅色背景色，會發現全螢幕寬、全螢幕高都鋪滿了紅色；
    2、給body設定margin:50px auto; 居中後，發現背景色和背景圖片都是從最左邊到最右邊寬度百分百，背景色的高度也是百分百；
    在你的程式碼基礎上做了修改，你看下：
    http://runjs.cn/code/jwwcoan0

    回覆
    0
  • 阿神

    阿神2017-04-17 14:56:09

    以前回答過的答案：
    body特殊性

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 14:56:09

    果然, 之前也沒有碰到過這樣的問題!

    試了一下!

    如果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.將會得到如下效果:

    希望對你有幫助!

    回覆
    0
  • 取消回覆