Question

背景起源已在div中成功测试，但未在主体中测试 https://chestnuttree.github.io/helloWord/pic1.png

然后我发现body的背景起源通过向body的父元素HTML添加背景色而起作用 https://chestnuttree.github.io/helloWord/pic2.png

body {
  padding: 10px;
  background: url(/i/eg_bg_03.gif) no-repeat #58a bottom right;
  background-origin: content-box;
}

html {
  background: #fff;
}

那是为什么？

Answer 1

应用于body元素的背景很特殊，因为它将先传播到html，然后传播到画布：

对于其根元素是HTML HTML元素或XHTML html元素[HTML]的文档：如果根元素上background-image的计算值不为空白，并且其背景色是透明的，则用户代理而是从该元素的第一个HTML BODY或XHTML body子元素传播背景属性的计算值。该BODY元素的背景属性使用的值是它们的初始值，并且将传播的值视为在根元素上指定的值对待。建议HTML文档的作者为BODY元素而不是HTML元素指定画布背景。 ^red

在下面的示例中，我将背景应用于主体，但实际上这些属性都应用于html，因此填充对计算原点没有影响。

body {
  padding: 10px;
  background: url(https://picsum.photos/id/10/50/50) no-repeat #58a bottom right;
  background-origin: content-box;
  margin:0;
  height:100vh;
  box-sizing:border-box;
}

改为在html中添加填充，background-origin将起作用：

body {
  background: url(https://picsum.photos/id/10/50/50) no-repeat #58a bottom right;
  background-origin: content-box;
  margin:0;
  height:100%;
  padding:10px;
  box-sizing:border-box;
}

html {
  padding:10px;
  height:100%;
  box-sizing:border-box;
}

或者将背景应用于与transparent不同的html，您将停止传播：

body {
  background: url(https://picsum.photos/id/10/50/50) no-repeat #58a bottom right;
  background-origin: content-box;
  margin:0;
  height:100%;
  padding:10px;
  box-sizing:border-box;
}

html {
  padding:10px;
  height:100%;
  box-sizing:border-box;
  background:red;
}

为什么背景起源在体内不起作用

1 个答案: