search

Home  >  Q&A  >  body text

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>

巴扎黑巴扎黑2780 days ago831

reply all(3)I'll reply

  • PHP中文网

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

    Because among all html tags, the background of the body is the most special, and the background calculation method of other tags is different;
    Maybe the W3C deliberately designed the body to be more complicated when it was developing browsers and html languages. to control the overall situation; my suggestion is to memorize these special places to avoid finding the source of the bug when problems arise in the future;
    To summarize, there are two strange places in the background of the body:
    1. You can try to give the body a red background color, and you will find that the full screen width and full screen height are covered with red;
    2. Set margin: 50px auto for the body; after centering, you will find that the background color and background image are all from the highest The width from the left to the far right is 100%, and the height of the background color is also 100%;
    I have made modifications based on your code. Take a look:
    http://runjs.cn/code/jwwcoan0

    reply
    0
  • 阿神

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

    Answer previously answered:
    Speciality of body

    reply
    0
  • PHP中文网

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

    Sure enough, I have never encountered such a problem before!

    Try it!

    If the background-image value of html is none (default value: none), and the background-color value is transparent (default value: transparent), then the browser will borrow these two attribute values ​​​​from the body to modify the html Set the background-image or background-color property.

        <style type="text/css">
        html{
            background-color: transparent;
        }
        body{
            width: calc(100% - 100px);
            height: 300px;
            background-color: red;
            margin: 50px;
        }
    </style>

    For example, if no changes are made to the above code, the effect will be as follows:

    If you change the background-color attribute value in html to a valid value, such as: #fafafa. You will get the following effect:

    Hope it helps!

    reply
    0
  • Cancelreply