1. 添加背景色
纯色背景：用background-color
渐变背景：用line-gradient，也可以一次用多个
div {background-color: red;}div {/* 单个渐变背景 */background: linear-gradient(to bottom, red, green);background: linear-gradient(to bottom, red, green 20%, orange 80%, blue);/* 多个渐变背景 */background: linear-gradient(to bottom, cyan, transparent),linear-gradient(225deg, magenta, transparent),linear-gradient(45deg, yellow, transparent);}
效果如下：
2. 添加背景图
background属性官网介绍：/zh-CN/docs/Web/CSS/background
图片背景：可以合在一起background；也可以单独写每个属性，例如background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment等
渐变背景：linear-gradient
div {/* 将背景设为一张居中放大的图片 */background: no-repeat center/50% url("../images/icon_test.png");}div {background-image: linear-gradient(to bottom, red, green 20%, orange 80%, blue);background-image: linear-gradient(to bottom, cyan, transparent),linear-gradient(225deg, magenta, transparent),linear-gradient(45deg, yellow, transparent);}
效果：
3.添加背景图和背景色混合
div {/* 中间是图片，四周是背景色 */background: url("../images/icon_test.png") center/50% no-repeat, linear-gradient(to bottom, red, green);/* 上部分是图片，后面是渐变背景色 */background: url("../images/icon_test.png") 0 0 no-repeat, linear-gradient(to right bottom, red 200px, green);}// 我的代码div {background: url('../images/icon_bg.png') 0 0 no-repeat, linear-gradient(to bottom, #FCFDFD, #FCFDFD);// background: #FCFDFD url('../images/icon_bg.png') 0 0 no-repeat;background-size: 100%;}
