CSS关于body元素中背景图像的困惑
[英]CSS confusion about background-image in body element
问题描述
I was confused by the background-image : 
我对背景图片感到困惑：
background-image in
divelementdiv元素中的background-imageWhen the background-image is in a
div, the image is placed withindiv.当背景图像位于div，该图像将放置在div。background-image in
bodyelementbody元素中的背景图像When the background-image is in a restrained body, the image is placed outside the body element.
当背景图像位于受约束的主体中时，该图像将放置在主体元素外部。
Can anyone tell me why? 谁能告诉我为什么？
that's result 那是结果
My code: 我的代码：
body{ height: 300px; width: 300px; position: absolute; top: 20%; left: 20%; border: 2px solid black; background-image: url('./alert.png'); background-repeat: no-repeat; } div{ border:2px solid red; width:100px; height:100px; border: 2px solid red; background-image: url('./alert.png'); background-repeat: no-repeat; position: absolute; top: 10%; left: 10% }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <div> </div> </body> </html>
2 个解决方案
解决方案1
1 2017-09-07 13:30:57
I can't tell why exact this is the case, I would guess that the <body> Tag has a special behavior, since it is supposed to be the root element of the whole page and normaly wraps everything. 我不知道为什么会这样，我猜<body>标记具有特殊的行为，因为它应该是整个页面的根元素，并且通常会包装所有内容。 But the background Image or Color of a <body> Element always is located at the top left corner, the only way to position it otherwise is with the background-position CSS Property, which will actually not work with colors. 但是<body>元素的背景Image或Color始终位于左上角，否则定位它的唯一方法是使用background-position CSS属性，该属性实际上不适用于颜色。 To create a gap for the background color, you only can give the <html> Tag a background color, but I would think that this is more a workaround than an actual solution. 要为背景颜色创建间隙，您只能为<html>标记提供背景颜色，但是我认为这比实际解决方案更具解决方法。 Personally, I would always set the margin and padding of <body> to 0 and achieve further gaps with a <div> Wrapper element inside of <body> . 就个人而言，我总是将<body>的margin和padding设置为0，并通过<body>内的<body> <div> Wrapper元素实现更大的间隙。 Below are two working code examples to show how to set background-position and how to have a (fake) "margin" for a background color with the help of the <html> Tag. 以下是两个有效的代码示例，这些示例演示如何设置background-position以及如何在<html>标记的帮助下为背景色设置（假的）“边距”。 Oh yeah, and is there any reason, why your body is positioned absolute? 哦，是的，有什么原因使您的身体处于绝对位置？ Just wondering if there is any use-case for this. 只是想知道是否有任何用例。
Positioned Background for body 身体的定位背景
body { background: url('http://via.placeholder.com/350x150'); background-position: 20px 50px; background-repeat: no-repeat; height: 200px; border: 1px solid; }
"Margin" with the help of <html> 在<html>的帮助下“保证金”
html { background-color: #fff; } body { margin: 50px; background-color: #00ff00; height: 200px; border: 1px solid; }
解决方案2
1 2017-09-07 13:44:50
From the specification (my emphasis): 从规范 （我的重点）：
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself.
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.