HTML DOM 样式 backgroundOrigin 属性

htmlweb developmentfront end technology更新于 2025/9/29 16:44:17

background-origin 属性用于设置或获取背景原点，即其相对位置。它可以相对于四个盒子模型区域中的任意一个。

语法

以下是语法 −

设置 backgroundOrigin 属性 −

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

值

以上属性值的解释如下 −

序号	值和说明
1	padding-box 用于设置背景图片相对于填充框的定位。这是默认值。默认值。背景图像相对于填充框定位。
2	border-box 用于将背景图像相对于边框框定位。
3	content-box 用于将背景图像相对于内容框定位。
4	initial 用于将此属性设置为初始值。
5	inherit 用于继承父级属性值。

示例

让我们看一个 backgroundOrigin 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1 {
      margin: 20px;
      box-shadow: 0 0 5px black;
      padding: 30px;
      background: url("https://www.cainiaomax.com/power_bi/images/power-bi-minilogo.jpg");
      background-origin: content-box;
      background-repeat: no-repeat;
      background-size: cover;
      font-size: 24px;
   }
   div>p {
      box-shadow: 0 0 5px darkgrey;
   }
</style>
<script>
   function changeBackOrigin(){
      document.getElementById("DIV1").style.backgroundOrigin="padding-box";
      document.getElementById("Sample").innerHTML="The background origin is now set to to padding-box";
   }
</script>
</head>
<body>
<h2>PowerBI Tutorial</h2>
<div id="DIV1">
<p>Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn
PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn
PowerBI...Learn PowerBI...Learn PowerBI... Learn PowerBI...Learn PowerBI...</p>
</div>
<p>Change the above div background origin by clicking the below button</p>
<button onclick="changeBackOrigin()">CHANGE ORIGIN</button>
<p id="Sample"></p>
</body>
</html>