CSS background-origin属性定义图像位置

background-origin属性

background-origin属性一般与background-position属性搭配使用，并根据前者指定的属性值，规定后者相对于什么位置来进行定位。

属性的三个值

background-origin属性有三个值，如下表：

值	描述
padding-box	背景图像相对于内边距来进行定位
border-box	背景图像相对于外边框来进行定位
content-box	背景图像相对内容定位

提示：如果背景图像background-attachment（设置背景图像是否随页面滚动的属性）的属性值为“fixed”，则background-origin属性没有效果。

background-origin实例代码，及在线编辑器

<div class='e1' id='x1'></div>
<div class='e1' id='y1'>文本内容</div>

<style>
  .e1{width:100%;height:50%;background-image:url("../../static/img/test.jpg");background-repeat:no-repeat;background-size:50px 50px;background-position:left;border:1px solid skyblue;padding:15%;}
  #x1{background-origin:border-box;}
  #y1{background-origin:content-box;}
</style>

hot：热门