Question

我有以下样式规则：

body {
  font-family: Georgia, serif;
  font-size: 100%;
  line-height: 175%;
  margin: 0 15% 0;
  background-color: #d2dc9d;
  background-clip: content-box;
}

当我测试使用它的页面时，background-clip属性似乎没有任何作用，即背景颜色超出了内容框，超出了页边距并延伸至屏幕边缘。

我去找规范中的解释：

https://www.w3.org/TR/css-backgrounds-3/#the-background-clip

请注意，根元素的背景绘画区域不同，因此，background-clip属性在它。

我还遇到了另一个相关的SO线程：

Why does styling the background of the body element affect the entire screen?

在CSS中，值永远不会向上传播；也就是说，一个元素永远不会将价值传递给其祖先。向上有一个例外 HTML中的传播规则：应用于主体的背景样式元素可以传递给html元素，即文档的根元素，并因此定义其画布。

是这样的情况是我应用的背景色从<body>元素传递到根<html>元素吗？因此，即使我可以将背景剪辑到<body>的内容框中，传递给<html>的背景色也会掩盖效果，因为它填充了画布？

无论出于何种原因，我是否可以明显剪辑到<body>的内容框中？我唯一的选择是在<div>与正文内容和样式之间插入<body>，如果这样的方法甚至可行？

如何将元素的背景剪切到其内容框中？

0 个答案: