css背景图片制作
CSS背景图片设置方法
background-image属性
使用background-image属性可以设置元素的背景图片。URL可以是相对路径或绝对路径。
div {
background-image: url("image.jpg");
}背景重复控制
background-repeat属性控制图片的重复方式。常用值包括：
repeat：默认值，水平和垂直重复no-repeat：不重复repeat-x：仅水平重复repeat-y：仅垂直重复
div {
background-repeat: no-repeat;
}背景位置调整
background-position属性设置图片的起始位置。可以使用关键词(left/right/center)或百分比/像素值。
div {
background-position: center top;
}背景大小控制
background-size属性定义图片尺寸：
cover：保持比例完全覆盖元素contain：保持比例完整显示图片- 具体数值：如
100px 200px
div {
background-size: cover;
}多重背景实现
CSS3支持为一个元素添加多个背景图片，用逗号分隔不同背景的声明：
div {
background-image: url("image1.png"), url("image2.jpg");
background-position: left top, right bottom;
background-repeat: no-repeat, repeat;
}渐变背景制作
线性渐变
使用linear-gradient()函数创建线性渐变背景：
div {
background: linear-gradient(to right, #ff0000, #0000ff);
}径向渐变
使用radial-gradient()函数创建径向渐变：
div {
background: radial-gradient(circle, red, yellow, green);
}背景附着方式
background-attachment属性决定背景是否随内容滚动：
scroll：默认值，背景随元素滚动fixed：背景相对于视口固定local：背景随元素内容滚动
div {
background-attachment: fixed;
}性能优化建议
对于大尺寸背景图，建议：
- 使用适当的图片格式（WebP格式通常最优）
- 压缩图片文件大小
- 考虑使用CSS渐变替代简单图案
- 对重复图案使用小尺寸图片配合
background-repeat
