上查看所有课程
CSS background-origin 属性设置背景图像的起始位置。例如，
div {
background-image: url("girl-illustration.png");
background-origin: content-box;
}浏览器输出
在此，background-origin 属性将背景图像的原点设置为 div 元素的 content-box。context-box 是显示元素实际内容的区域。
CSS 背景原点语法
background-origin 属性的语法是：
background-origin: padding-box | border-box | content-box | initial | inherit;这里，
padding-box：背景图像从内边距边缘的左上角开始 (默认值)border-box：背景图像从边框边缘的左上角开始content-box：背景图像从内容边缘的左上角开始initial：将属性值设置为默认值inherit：从其父元素继承属性
示例：CSS background-origin
让我们来看一个 background-origin 属性的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-origin</title>
</head>
<body>
<h2>background-origin: border-box:</h2>
<div class="example example1">
<h3>Heading</h3>
<p>
The background image starts from the upper left corner of the
border.
</p>
</div>
<h2>background-origin: padding-box (default):</h2>
<div class="example example2">
<h3>Heading</h3>
<p>
The background image starts from the upper left corner of the
padding edge.
</p>
</div>
<h2>background-origin: content-box:</h2>
<div class="example example3">
<h3>Heading</h3>
<p>
The background image starts from the upper left corner of the
content.
</p>
</div>
</body>
</html>/* styles the all div */
div.example {
border: 14px dashed orange;
padding: 16px;
background-image: url("bg-image.png");
background-repeat: no-repeat;
}
div.example1 {
background-origin: border-box;
}
div.example2 {
/* default value */
background-origin: padding-box;
}
div.example3 {
background-origin: content-box;
}浏览器输出
上面的示例说明了 background-origin 属性的不同值。
在上面的示例中，背景图像默认也延伸到边框边缘。我们可以使用 background-clip 属性来更改它。
背景原点与背景附着
background-origin 属性对 background-attachment 属性的 fixed 值没有影响。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-origin</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
</body>
</html>div {
background-image: url("https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
background-repeat: no-repeat;
background-size: 500px;
border: 2px solid black;
padding: 16px;
/* sets the background-attachment to fixed */
background-attachment: fixed;
/* sets background image to start from content-box, doesn't work */
background-origin: content-box;
}浏览器输出
在上面的示例中，即使将 background-origin 属性设置为 content-box，背景图像也不会从内容开始。