CSS3 background属性

1. 背景颜色

使用 background-color 属性为元素设置背景颜色。

div {  
  background-color: #f0f0f0;  
}

2. 背景图片

使用 background-image 属性为元素设置背景图片。

div {  
  background-image: url('path/to/image.jpg');  
}

3. 背景大小

使用 background-size 属性来调整背景图片的大小。

div {  
  background-image: url('path/to/image.jpg');  
  background-size: cover; /* 背景图片完全覆盖元素 */  
}

4. 背景位置

使用 background-position 属性来调整背景图片的位置。

div {  
  background-image: url('path/to/image.jpg');  
  background-position: right top; /* 背景图片顶部右侧 */  
}

5. 背景重复

使用 background-repeat 属性来控制背景图片是否以及如何重复。

div {  
  background-image: url('path/to/image.jpg');  
  background-repeat: no-repeat; /* 背景图片不重复 */  
}

6. 多背景图片

使用逗号分隔多个 background-image 值，可以为元素设置多个背景图片。

div {  
  background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');  
  background-position: right top, center center; /* 第一个背景图片顶部右侧，第二个背景图片居中 */  
  background-repeat: no-repeat, repeat; /* 第一个背景图片不重复，第二个背景图片重复 */  
}

7. 渐变背景

使用 CSS3 的 linear-gradient 和 radial-gradient 函数来创建渐变背景。

线性渐变：

div {  
  background: linear-gradient(direction, color-stop1, color-stop2, ...);  
}

径向渐变：

div {  
  background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);  
}

8. 多背景

使用逗号分隔多个 background-* 值，可以为元素设置多个背景。这包括多个颜色、多个图片等。

例如：同时设置渐变和背景图片：

div {  
  background: linear-gradient(direction, color-stop1, color-stop2), url('path/to/image.jpg');  
}

本文地址：https://www.tides.cn/p_css3-background