.background { background: linear-gradient(90deg, rgba(237,65,86,1) 0%, rgba(221,36,118,1) 25%, rgba(137,46,182,1) 50%, rgba(66,66,245,1) 75%, rgba(65,209,229,1) 100%), url('背景图片路径'); }
代码解释:
1. 选定类名为background的元素
2. 设置背景
a. 使用线性渐变生成背景颜色,方向从左到右,起点颜色红色(rgba(237,65,86,1)),终点颜色蓝色(rgba(65,209,229,1))
b. 加入图片作为背景
注意事项:
1. 渐变颜色和起止点可以自定义,掌握line-gradient用法可以设置不同的颜色渐变方案
2. 图片路径需要根据实际情况去修改,可以使用相对路径或绝对路径
3. 如果需要在背景上添加其他元素,需要使用z-index调整层级