大部分刚接触前端的应该对background-image的了解应该都只在背景图上,就比如说background-image:url…,但是其实,background-img还可以用于设置渐变色
线性渐变
线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。
background-image: linear-gradient( 角度 , 颜色);
background: linear-gradient( 角度 , 颜色);
参数1:角度(right/bottom/top/left/0~360deg)可以是一个或者多个组合,参数1不写,默认颜色从上过渡到下
参数2:颜色,可以设置多值,即从一种颜色过渡到另一种颜色
举个例子
第一个background的存在是因为可能存在兼容性问题,如果不兼容,就显示第一个background设置的颜色
background-image 或者background都可以设置渐变色
第二个background设置颜色从底部往上lightblue, lightcoral, rgb(48, 12, 231)颜色依次渐变 -webkit-是兼容浏览器内核
#clockBox{
background:lightblue;
background-image: -webkit-linear-gradient(bottom, lightblue, lightcoral, rgb(48, 12, 231));
}
从右往左渐变
#clockBox{
background:lightblue;
background-image: -webkit-linear-gradient(right, lightblue, lightcoral, rgb(48, 12, 231));
}
从右下往左上渐变
#clockBox{
background:lightblue;
background-image: -webkit-linear-gradient(right bottom, lightblue, lightcoral, rgb(48, 12, 231));
}
参数1也可以用角度的形式设置
浏览器会绘制一条经过元素中心点的假想线,指向45°刻度,因此,这个过渡从元素的左下角开始,到右上角结束。
#clockBox{
background:lightblue;
background-image: -webkit-linear-gradient(30deg, lightblue, lightcoral, rgb(48, 12, 231));
}
最后,还可以在颜色后面再加一个值,明确指明各色标的位置,从右向左渐变,在元素宽度90%的位置变成 lightcoral色。
#clockBox{
background:lightblue;
background-image: -webkit-linear-gradient(right, lightblue, lightcoral 90%, rgb(48, 12, 231));
}
这里推荐一个很好玩的网站:
https://codepen.io/thebabydino/full/qgoBL.
此外,部分引用自 https://www.jianshu.com/p/58b340a037ea.作者写的更详细,可供参考