css3背景background

ゞ浴缸里的玫瑰 2023-06-25 06:25 82阅读 0赞

### 背景图片（background-image） ###

在css3中背景图片可以放置多张图片，`background-image: url(image1.jpg,image2.jpg)`，中间以都够分隔；  
而且背景图片默认平铺，图片显示的位置默认从元素的padding开始显示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70]  
由图我们可知，我们的图片是从padding的位置开始显示，我们可以通过属性`background-origin`来改变背景图片显示的位置

*  **background-origin**

> padding-box：从padding开始显示图片  
> border-box：从border开始显示图片  
> content-box：从content开始显示图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 1]

### 背景图片大小（background-size） ###

> **cover**：背景图片覆盖，将最短的边缩放至元素宽高  
> **contain**：背景图片完整显示，将最长的边缩放至元素宽高  
> **px**：具体的宽高  
> **%**：百分比

background-size：cover

![在这里插入图片描述][20191226204147784.png]

background-size:contain

![在这里插入图片描述][20191226204311810.png]

### 背景图片定位（background-position） ###

通过设置背景图片的定位，可以控制背景图片显示的区域，一般用于**Sprite图**。

background-size:10px 10px;

![在这里插入图片描述][20191226204850725.png]

### 背景线性渐变（background-image:linear-gradient(\#fff，\#f00)） ###

> • background-image:linear-gradient(to top，\#fff，\#f00) 从下到上  
> • background-image:linear-gradient(to right，\#fff，\#f00) 从左到右  
> • background-image:linear-gradient(to bottom，\#fff，\#f00) 从上到下  
> • background-image:linear-gradient(to left，\#fff，\#f00) 从右到左

### 背景镜面渐变（background-image:radial-gradient(\#fff，\#f00)） ###

> background-image:radial-gradient(\#fff，\#f00)

### 指定区域显示背景（background-clip） ###

> padding-box 指定从padding内显示图片  
> border-box 指定从border内显示图片  
> content-box 指定从content内显示图片  
> text 指定从文本内显示图片（兼容性：只有在谷歌内核才可以使用。）  
> \-webkit-background-clip:text

**使用的时候必须设置文本填充颜色为透明色`-webkit-text-fill-color：transparent`**

### 背景图片平铺方式（background-repeat） ###

> • no-repeat：不平铺 图片不平铺，显示一张图片  
> • space：填充 不会对图片进行缩放，不够存放的位置空白显示  
> • round：拉升 对图片进行拉伸，直到足够存放新的图片位置。

### 背景图片在滚动区域的定位（background-attachment） ###

> • scroll：相对于容器定位，默认值  
> • local：相对于内容定位  
> • fixed：相对于文档可视区定位

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226203241910.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191226203841967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70
[20191226204147784.png]: https://img-blog.csdnimg.cn/20191226204147784.png
[20191226204311810.png]: https://img-blog.csdnimg.cn/20191226204311810.png
[20191226204850725.png]: https://img-blog.csdnimg.cn/20191226204850725.png