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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
Answer previously answered:
Speciality of body
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.
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!