CSS3-背景原点、背景裁剪

￡神魔★判官ぃ 2023-07-02 04:28 40阅读 0赞

`background-origin` 用于设置背景图像相对于什么位置来定位（背景图的起点）。

语法：

background-origin: padding-box|border-box|content-box;

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>背景相对于元素边框来定位； 从 border 区域（含border）开始显示背景图像</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>背景相对于内边距来定位（默认）；从 padding 区域（含padding）开始显示背景图像</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景相对于内容来定位；从 content 区域开始显示背景图像</td> 
  </tr> 
 </tbody> 
</table>

相对于边框：

CSS:

div { 
        width: 200px;
    	height: 200px;
    	padding: 20px;
    	margin: 10px;
    	background-color: skyblue;
    	border:10px dashed gray;
    	background-image: url(images/bg.jpg);
    	background-repeat: no-repeat;
    	  /* 相对于边框定位 */
    	background-origin: border-box;
    }

HTML:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
相对于内边距：

/* 相对于内边距定位 */
    background-origin: padding-box;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]  
相对于外边距：

/* 相对于内边距定位 */
    background-origin: content-box;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]  
`background-clip` 该属性用于设置背景的裁剪区域

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>从border区域（不含border）开始向外裁剪背景。(默认)</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>从padding区域（不含padding）开始向外裁剪背景</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>从content区域开始向外裁剪背景</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果</td> 
  </tr> 
 </tbody> 
</table>

div { 
    	width: 200px;
    	height: 200px;
    	padding: 20px;
    	margin: 10px;
    	background-color: skyblue;
    	border:10px dashed gray;
    	/* border 区域开始裁剪 */
    	background-clip: border-box;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]

padding 区域开始裁剪:

background-clip: padding-box;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]  
content区域开始裁剪:

background-clip: content-box;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 5]  
从文字区域开始裁剪：

CSS:

P { 
    	width: 800px;
    	height: 300px;
    	/* 文字颜色透明 */
    	color: transparent;
    	font-size: 100px;
    	/* 图片作为背景色 */
    	background-image: url(images/mm.jpg);
    	-webkit-background-clip: text;
    }

HTML:

<P>可实现文字的遮罩效果</P>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200126155759703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200126155956529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200126160145234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200126164211873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200126164224354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200126164240551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200126192425483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70