CSS 属性

CSS 属性 background-origin 用于设置背景的原点，可以是从边框的开始、边框内部或填充内部。

注意:当 background-origin 设置为fixed时，background-origin将被忽略。

属性background-origin 与属性background-clip 类似，不同之处在于它会调整背景大小，而不是剪切背景。

属性值

  • border-box:背景相对于边框框定位。

  • padding-box:背景相对于内边距框定位

  • content-box:背景相对于内容框定位

适用范围

所有 HTML 元素。

DOM 语法

object.style.backgroundOrigin = "border-box | padding-box | content-box"

CSS background-origin 示例

以下示例演示如何使用不同的background-origin值（border-box、padding-box、content-box）来设置背景原点 -

<html>
<head>
<style>  
   div {
      border: 10px rgb(13, 7, 190);
      border-style: dashed;
      margin: 5px;
      padding: 1cm;
      font: 700 1em sans-serif;
      color: aliceblue;
      display: inline-block;
      background-image: url('/css/images/yellow-flower.jpg');
      height: 200px;
      width: 200px;
   }
   .border-box {
      background-origin: border-box;
   }
   .padding-box {
      background-origin: padding-box;
   }
   .content-box {
      background-origin: content-box;
      background-repeat: no-repeat;
   }
</style>
</head>
<body>
   <div class="border-box">background origin border-box</div>
   <div class="padding-box">background origin padding-box</div>
   <div class="content-box">background origin content-box</div>
</body>
</html>

CSS background-origin: 具有多个值

以下示例演示如何使用background-origin属性设置多个背景原点 -

<html>
<head>
<style>  
   div {
      border: 10px rgb(13, 7, 190);
      border-style: dashed;
      padding: 1cm;
      font: 700 1em sans-serif;
      color: black;
      display: inline-block;
      background: url('/css/images/white-flower.jpg'), url('/css/images/tree.jpg');
      background-origin: content-box, padding-box;
      background-repeat: no-repeat;
      height: 300px;
      width: 300px;
   }
</style>
</head>
<body>
   <div>
      <p>background-origin: content-box and border-box</p>
   </div>
</body>
</html>