---
title: 背景属性
date: 2024-06-06T23:51:06Z
tags: []
---



## 设置背景的原点

​`background-origin`​  
语法:

1. ​`padding-box`​:从padding区域开始显示背景图像
2. ​`border-box`​:从border区域开始显示背景图像
3. ​`content-box`​:从content区域开始显示背景图片

## 设置背景图向外裁剪的区域

​`background-clip`​

1. ​`border-box`​:从border区域向外裁剪背景 --默认值
2. ​`padding-box`​:从padding向外裁剪背景
3. ​`content-box`​:从content区域向外裁剪背景
4. ​`text`​:背景只呈现在文字上

## 设置背景图的尺寸

​`background-size`​

1. 指定背景图大小,不允许负值
2. 指定背景图百分比大小,不允许负值
3. ​`auto`​:背景图片的真实大小--默认值
4. ​`contain`​:将背景图片等比例缩放,将完整背景图片包含于容器内,但注意可能部分区域没有背景图片
5. ​`cover`​:将图片等比例缩放,直到完全覆盖容器,图片会尽可能显示,但注意背景图片可能显示不完整

## 背景的复合属性

​`color url repeat position / size origin clip;`​  
注意:

1. origin和clip的值如果一样,如果只写一个值,则origin和clip都设置;如果设置了两个值,前面的是origin,后面的clip
2. size的值必须写在position值的后面,并且用/分开

## 多背景图

用一个复合属性写多个背景图用`,`隔开
