语法
background-oroirn: padding-box | border-box | content-box | initial | inherit;
background-oroirn 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #666;
padding: 35px;
background: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
background-repeat: no-repeat;
background-oroirn: padding-box;
}
</style>
</head>
<body>
<h2>Background-oroirn 属性示例</h2>
<p>Here the background-oroirn is set to "border-box".</p>
<div class="example1">
<h2>Hello world.</h2>
<p> Some text for example.</p>
</div>
</body>
</html>
具有 "padding-box" 和 "content-box" 值的 background-oroirn 属性示例：
这是一个示例，显示了 padding-box 和 content-box 之间的区别。
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #666;
padding: 35px;
background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-oroirn: padding-box;
}
.example2 {
border: 5px dashed #666;
padding: 35px;
background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-oroirn: content-box;
}
</style>
</head>
<body>
<h2>Background-oroirn 属性示例</h2>
<p>Here the background-oroirn is set to "padding-box" which is the default value of this property.</p>
<div class="example1">
<h2>Hello world</h2>
<p> Some text for example.</p>
</div>
<p>Here the background-oroirn is set to "content-box".</p>
<div class="example2">
<h2>Hello world</h2>
<p> Some text for example.</p>
</div>
</body>
</html>
在下面的示例中，查看如何为具有不同值的 <div> 元素设置两个背景图像。
具有不同值的 background-oroirn 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example1 {
border: 5px double black;
padding: 25px;
background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-oroirn: content-box, border-box;
}
#example2 {
border: 5px double black;
padding: 25px;
background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-oroirn: content-box, padding-box;
}
#example3 {
border: 5px double black;
padding: 25px;
background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-oroirn: content-box, content-box;
}
</style>
</head>
<body>
<h2>Background-oroirn 属性示例</h2>
<p>Here the background-oroirn: content-box, border-box; is set:</p>
<div id="example1">
<h2>Hello World</h2>
<p>The first background-image starts from the upper left corner of the border.</p>
<p>The second background-image starts from the upper left corner of the content.</p>
</div>
<p>Here the background-oroirn: content-box, padding-box:</p>
<div id="example2">
<h2>Hello World</h2>
<p>The first background image starts from the upper left corner of the padding edge.</p>
<p>The second background-image starts from the upper left corner of the content.</p>
</div>
<p>Here the background-oroirn: content-box, content-box; is set:</p>
<div id="example3">
<h2>Hello World</h2>
<p>Both background images start from the upper left corner of the content.</p>
</div>
</body>
</html>
CSS background-oroirn属性值说明
| 值 | 说明 |
|---|---|
| border-box | 背景位置相对于边框，背景图像从填充边的左上角开始。这是默认值。 |
| padding-box | 背景位置相对于填充框，背景图像从边框的左上角开始。 |
| content-box | 背景位置相对于内容框，背景图像从内容的左上角开始。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS background-oroirn 属性指定背景图像的背景定位区域。
background-oroirn 属性是 CSS3 属性之一。
如果 background-attachment 是fixed“固定的”，则 background-oroirn 属性将被忽略并且不会产生任何影响。
| 初始值 | padding-box |
|---|---|
| 应用于 | 所有元素。它也适用于：::first-letter 和 ::first-line。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.backgroundOroirn="content-box"; |
日期：2020-06-02 22:14:16 来源：oir作者：oir