background-origin属性使用示例-CSDN博客

本文链接：https://blog.csdn.net/Elna_99/article/details/64484045

本文详细介绍了CSS中的background-origin属性，该属性决定了背景图片的定位原点。具体包括content-box、padding-box及border-box三种取值方式，并通过示例展示了不同取值对背景图片位置的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

background-origin用来决定background-position的参考原点，即背景图片定位的起点。取值有content-box,padding-box,padding-box三种。

content-box:背景图像相对于内容框来定位：

 
  .padding-box{ 
 
  width:  
  314px; 
 
  height:  
  500px; 
 
  border:  
  1px  
  solid  
  rgba( 
  0, 
  0, 
  0, 
  .5); 
 
  background:  
  orange  
  url( 
  img/k.jpg)  
  no-repeat  
  left  
  top; 
 
  padding:  
  20px; 
 
  margin:  
  30px; 
 
  background-origin:  
  content-box; 
 
  -webkit-background-origin: 
  content-box; 
 
  -moz-background-origin:  
  content-box; 
 
  -o-background-origin:  
  content-box; 
 
  -ms-background-origin:  
  content-box; 
 
   }

padding-box:背景图像相对于内边距来定位：

 
  .padding-box{ 
 
  width:  
  314px; 
 
  height:  
  500px; 
 
  border:  
  1px  
  solid  
  rgba( 
  0, 
  0, 
  0, 
  .5); 
 
  background:  
  orange  
  url( 
  img/k.jpg)  
  no-repeat  
  left  
  top; 
 
  padding:  
  20px; 
 
  margin:  
  30px; 
 
  background-origin:  
  padding-box; 
 
  -webkit-background-origin: 
  padding-box; 
 
  -moz-background-origin:  
  padding-box; 
 
  -o-background-origin:  
  padding-box; 
 
  -ms-background-origin:  
  padding-box; 
 
   }

border-box背景图像相对于边框来定位：

 
  .padding-box{ 
 
  width:  
  314px; 
 
  height:  
  500px; 
 
  border:  
  1px  
  solid  
  rgba( 
  0, 
  0, 
  0, 
  .5); 
 
  background:  
  orange  
  url( 
  img/k.jpg)  
  no-repeat  
  left  
  top; 
 
  padding:  
  20px; 
 
  margin:  
  30px; 
 
  background-origin:  
  border-box; 
 
  -webkit-background-origin: 
  border-box; 
 
  -moz-background-origin:  
  border-box; 
 
  -o-background-origin:  
  border-box; 
 
  -ms-background-origin:  
  border-box; 
 
   }