Question

我一直认为元素background-image出现在元素本身，padding和border但不其margin 。但是，在尝试让其他内容发挥作用的同时，我发现情况似乎并非如此，而background-image中出现了margin。

body {
    background: url("https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color:red;
    margin: 50px;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

https://jsfiddle.net/rz52z14r/

可以看出，背景出现在margin中。另外，如果我添加overflow: hidden，溢出实际上并不隐藏。同样，我的印象是overflow是元素范围之外的任何东西，即元素和填充不，包括margin。

总体而言：为什么背景图片出现在margin？为什么溢出不被隐藏？

编辑： 这个问题有几个类似的答案;所有这些都为这种情况提供了解决方案。但是，情况是虚构的。我想知道的是为什么会在 <body> 标记上发生此行为，而不是其他任何标记？

Answer 1

发生这种情况的原因是因为在渲染background时将根元素视为特殊情况。实际上，background未应用于body，而是应用于画布：

根元素的背景成为画布的背景并覆盖整个画布，锚定（对于＆＃39;背景位置＆＃39;）在同一点上，如果它仅为画布绘制根元素本身。根元素不会再次绘制此背景。

背景（http://www.w3.org/TR/CSS2/colors.html#background）

但是这种情况下的根元素是html元素不是吗？好吧，以下说明最好将background应用于body而不是html元素：

但是，对于HTML文档，我们建议作者指定BODY元素的背景而不是HTML元素。

背景（http://www.w3.org/TR/CSS2/colors.html#background）

如果background-color元素的background-image和html分别为transparent和none，则有关画布的规则适用于body而是元素：

对于根元素为HTML＆＃34; HTML＆＃34;元素或XHTML＆＃34; html＆＃34;计算了＆＃39;透明＆＃39;的值的元素为了背景色＆＃39;并且没有＆＃39;对于＆＃39; background-image＆＃39;，用户代理必须使用该元素的第一个HTML＆＃34; BODY＆＃34;的背景属性的计算值。元素或XHTML＆＃34; body＆＃34;绘制画布背景时的元素子元素，不得为该子元素绘制背景。如果仅为根元素绘制它们，那么这些背景也必须固定在同一点上。

背景（http://www.w3.org/TR/CSS2/colors.html#background）

因此，要background尊重body，margin只需将background-color添加到CSS中的html元素：

＆＃13;

html {
    background-color: red;
}
body {
    background: url("https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color:red;
    margin: 50px;
}

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

＆＃13;

Answer 2

将background-image应用于您的容器，而不是您的身体。

p {
    background: url("https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color:red;
    margin: 50px;
}

请参阅：https://jsfiddle.net/rz52z14r/9/

Answer 3

我不太确定您要做什么，但您拥有的背景图片位于.body标记中。而不是.Body p

https://jsfiddle.net/rz52z14r/12/

背景图像出现在身体边缘

3 个答案: