📜  HTML | DOM 样式 backgroundOrigin 属性(1)

📅  最后修改于: 2023-12-03 15:31:13.427000             🧑  作者: Mango

HTML | DOM 样式 backgroundOrigin 属性介绍

简介

在CSS中,我们可以用background-origin属性来决定背景图片的定位基准点,而在HTML DOM中,我们同样可以用backgroundOrigin属性来设置元素的背景图片定位基准点。

语法
element.style.backgroundOrigin="border-box|padding-box|content-box|initial|inherit"
取值

backgroundOrigin属性可以取以下值:

  • border-box:背景图片的定位基准点为元素的边框框线盒子;
  • padding-box:背景图片的定位基准点为元素的内边距盒子;
  • content-box:背景图片的定位基准点为元素的内容区域盒子;
  • initial:取默认值;
  • inherit:继承父元素的属性值。
示例
<div style="width: 300px; height: 200px; border: 10px solid #000000; padding: 20px; background-image: url('example.jpg'); background-size: contain; background-repeat: no-repeat;">
    <div style="background-origin: border-box;">
        这是基于边框定位点的背景图片。
    </div>
    <div style="background-origin: padding-box;">
        这是基于内边距定位点的背景图片。
    </div>
    <div style="background-origin: content-box;">
        这是基于内容区域定位点的背景图片。
    </div>
 </div>
说明

在上述示例中,我们为一个div元素添加了一个背景图片,并在该元素的子元素上设置了不同的background-origin属性值,分别为border-box、padding-box和content-box,以此来展示如何设置背景图片的定位基准点。在实际应用中,我们可以根据需求来选择合适的定位基准点来展示背景图片。