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属性官网介绍:https://developer.mozilla.org/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%;
}