CSS的background属性及CSS3的背景图片设置总结
在CSS中，background属性用于设置元素的背景样式，包括背景色、背景图像、背景大小、背景重复方式等。同时，CSS3引入了更多的背景图片设置选项，使得背景效果更加丰富多样。本文将详细介绍CSS的background属性以及CSS3的背景图片设置相关内容。
1. background-color
background-color用于设置元素的背景色。可以使用常用的颜色名称、RGB值、十六进制等方式进行设置。
.example {
background-color: blue;
}
其中，.example是一个class选择器，表示对class为example的元素应用样式，background-color: blue表示将背景色设置为蓝色。
2. background-image
background-image用于设置元素的背景图像。可以使用图片文件的URL作为参数。
.example {
background-image: url("example.jpg");
}
上述代码表示将名为example.jpg的图片作为元素的背景图像。
3. background-repeat
background-repeat用于设置背景图像的重复方式。有四个取值：repeat（默认值，图像在水平和垂直方向都重复）、repeat-x（图像只在水平方向重复）、repeat-y（图像只在垂直方向重复）和no-repeat（图像不重复）。
.example {
background-repeat: repeat-x;
}
上述代码表示图像只在水平方向重复。
4. background-position
background-position用于设置背景图像的位置。可以使用关键字（如top、bottom、left、right）或百分比值进行设置。默认值为left top。
.example {
background-position: right bottom;
}
上述代码表示将图像定位于元素的右下角。
5. background-size
background-size用于设置背景图像的大小。可以使用关键字（如auto、cover、contain）或具体数值进行设置。默认值为auto。
.example {
background-size: 100px 200px;
}
上述代码表示将背景图像的宽度设置为100px，高度设置为200px。
6. CSS3背景图片设置
CSS3引入了一些新的背景图片设置选项，使得背景效果更加丰富多样。
6.1. background-clip
background-clip用于设置背景图片的绘制区域。有三个取值：border-box（默认值，背景图片绘制在边框区域内）、padding-box（背景图片绘制在内边距区域内）、content-box（背景图片绘制在内容区域内）。
.example {
background-clip: padding-box;
}
上述代码表示将背景图片绘制在内边距区域内。
6.2. background-origin
background-origin用于设置背景图片的起始位置。有三个取值：border-box（背景图片起始于边框左上角）、padding-box（背景图片起始于内边距左上角）、content-box（背景图片起始于内容区域左上角）。
.example {
background-origin: content-box;
}
上述代码表示背景图片起始于内容区域左上角。
6.3. background-size
background-size在CSS3中新增了一些新的取值，使得对背景图像的缩放控制更加灵活。
6.4. linear-gradient
linear-gradient用于创建线性渐变的背景图像。可以设置渐变的角度、渐变的颜色等。
.example {
background-image: linear-gradient(to right, red, yellow);
}
上述代码表示创建一个从左到右的红色到黄色的线性渐变背景图像。
总结
CSS的background属性及CSS3的背景图片设置为页面提供了丰富的背景样式选项。通过设置background-color、background-image、background-position、background-repeat、background-size等属性，可以轻松实现各种背景效果。而CSS3的背景图片设置选项更进一步扩展了背景图像的样式，包括background-clip、background-origin、background-size和linear-gradient等，使得页面的背景更加多样化。