详解 CSS 的背景属性

我不是女神ヾ 2024-05-06 21:23 105阅读 0赞

## 详解 CSS 的背景属性 ##

![previewfile\_1991692168][previewfile_1991692168]

### **背景颜色** ###

> 语法： `background-color: [指定颜色];`

注：默认是 transparent (透明) 的，可以通过设置颜色的方式修改

**示例代码:**  
![image-20240223173025490][]

**运行效果:**  
![image-20240223173123327][]

### **背景图片** ###

> 语法：`background-image: url(...);`

*  `url` 可以是绝对路径 也可以是相对路径
 *  `url` 上可以加引号, 也可以不加.

比 image 标签更方便控制位置(图片在盒子中的位置)

**示例代码**  
![image-20240224132825189][]

**运行效果**  
![image-20240224133015726][]

### **背景平铺** ###

> 语法：`background-repeat: [平铺方式];`

<table> 
 <thead> 
  <tr> 
   <th align="center">background-repeat的重要取值</th> 
   <th align="center">效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><code>repeat</code>(默认值)</td> 
   <td align="center">平铺</td> 
  </tr> 
  <tr> 
   <td align="center"><code>no-repeat </code></td> 
   <td align="center">不平铺</td> 
  </tr> 
  <tr> 
   <td align="center"><code>repeat-x</code></td> 
   <td align="center">水平平铺</td> 
  </tr> 
  <tr> 
   <td align="center"><code>repeat-y</code></td> 
   <td align="center">垂直平铺</td> 
  </tr> 
 </tbody> 
</table>

注：背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方

**示例代码:**  
![image-20240224134849607][]

**运行效果:**  
![image-20240224134927183][]

### **背景位置** ###

修改图片的位置

> 语法：`background-position: x y;`

参数有三种风格:

1.  方位名词：top, left, right, bottom。
2.  精确单位：坐标或者百分比(以左上角为原点)
3.  混合单位：同时包含方位名词和精确单位

注意：如果参数的两个值都是方位名词， 则前后顺序无关. (top left 和 left top 等效)；  
如果只指定了一个方位名词， 则第二个默认居中(left 则意味着水平居中, top 意味着垂直居中)

**示例代码:**  
![image-20240224162427315][]

**运行效果:**  
![image-20240224162537448][]

### **背景尺寸** ###

> 语法：`background-size: length|percentage|cover|contain;`

注意事项：

*  可以填具体的数值： 如 `40px 60px`，表示宽度为 40px，高度为 60px
 *  可以填百分比：按照父元素的尺寸设置
 *  `cover`：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。
 *  `contain`：使用时不会让背景图像完全覆盖背景区域，会给背景区域的左右留出一部分区域

**示例代码:**  
![image-20240224171056662][]

**运行效果:**  
![image-20240224171211450][]

[previewfile_1991692168]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/9436d1f2d47249428aeaa723f89cf76e.jpeg
[image-20240223173025490]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1f222ec156094b42b5eb05b6c3b84c8f.png
[image-20240223173123327]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/4c1db977da9940fba02d5904988d1709.png
[image-20240224132825189]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/64b3d7e75566434d950d32210f85ea8a.png
[image-20240224133015726]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/31c59305ac3b41cbb3c8d9a32d95de77.png
[image-20240224134849607]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e429965b5d354856bc19f157402e8d59.png
[image-20240224134927183]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/988f42ddb8f1446ab04ca94bf4a8c079.png
[image-20240224162427315]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ceb44f2a47ce4983952bf218306aa870.png
[image-20240224162537448]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f320cf91213f40e88c64f4ce56769c63.png
[image-20240224171056662]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/98063baa0d504cab8938542d96260b99.png
[image-20240224171211450]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/a3653b9159054c3c9249f0d6b86a8eff.png