css怎样设置渐变背景

在当前很多浏览器的网页中,我们可以看到有很多网页都有渐变背景的,那么网页怎样实现渐变背景呢?今天咪咪我就来分享一下HTML中设置渐变背景的方法。

操作方法

(01)首先,先设置两个div,然后给它们添上类名。

css怎样设置渐变背景

(02)然后我们对第一个div设置线性渐变,如图所示,先设置好宽高,然后给background设置-webkit-linear-gradient。

css怎样设置渐变背景 第2张

(03)然后里面设置参数,top表示的是位置,从顶部开始,当然其他位置参数比如left ,right,bottom也是可以的,后面的表示的是颜色值。

css怎样设置渐变背景 第3张

(04)如图,设置好之后,我们的div背景颜色就从上往下,由红色渐变成蓝色。

css怎样设置渐变背景 第4张

(05)此外,我们可以设置left top表示从左上角开始,到右下角,也就是对角线渐变。注意,位置之间没有逗号哦。并且left不能和right同时存在,同理,top也不能和bottom同时存在哦。

css怎样设置渐变背景 第5张

(06)保存之后,我们就可以看到背景颜色从对角线开始渐变了哦。

css怎样设置渐变背景 第6张

(07)当然,我们也可以设置多个颜色渐变,如图,我就随意的设置了几种颜色,大家可以根据自己的喜好来设置颜色。

css怎样设置渐变背景 第7张

(08)如图所示,这就是几种颜色的渐变,有红,蓝,绿,黄等颜色渐变。

css怎样设置渐变背景 第8张

(09)接着我们来设置径向渐变,对background设置-webkit-radial-gradient。

css怎样设置渐变背景 第9张

(10)然后我们在里面添加颜色值,注意,位置默认是从中心点开始的,所以我们可以不用设置。

css怎样设置渐变背景 第10张

(11)之后,径向渐变就成功了,默认从中心点开始进行渐变。

css怎样设置渐变背景 第11张

(12)此外,我们还可以设置渐变的范围,如图,在颜色的后面添加百分比,这样就可以设置颜色范围了。

css怎样设置渐变背景 第12张

(13)如图,百分比设置好之后,颜色范围就改变了,这里我就设置绿色范围比较多。

css怎样设置渐变背景 第13张