css怎样设置渐变背景

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

  • 08

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

  • 09

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

  • 10

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

  • 11

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

  • 12

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

  • 13

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

(0)

相关推荐

  • 3Dmax如何设置渐变背景

    3Dmax建模后渲染出来的背景一般都是黑色的,那么,黑色背景可以改成渐变颜色吗?可以.今天小编就给大家讲讲3Dmax如何设置渐变背景. 操作方法 01 打开 3Dmax2012软件,建好一个我们想要的 ...

  • Adobe Illustrator(AI)如何设置渐变背景

    Adobe Illustrator广泛应用于印刷出版.海报书籍排版.专业插画.多媒体图像处理和互联网页面的制作等,也可以为线稿提供较高的精度和控制,适合生产任何小型设计到大型的复杂项目,同样作为绘图软 ...

  • ae怎么设置渐变背景?AE如何制作四色渐变背景?

    在after effects软件中,固态层,除了填充单种颜色外,还可以设置渐变颜色,也可以设置成四色渐变. 操作方法 01 启动AE软件,打开操作界面, 我们按下快捷键,CTRL+N,新建合成, 02 ...

  • css怎样设置div背景色渐变

    Css设置 div渐变背景可以让网页看起来更有层次感,那么css怎样设置 div背景颜色渐变呢?今天小编我就来分享一下 css渐变背景的方法. 操作方法 01 举个例子,既然是要设置div渐变,所以我 ...

  • 如何在HTML中设置网页背景颜色

    想在HTML中设置网页背景颜色,你只需要在标签中的"body"元素做些简单的更改就行了.这些步骤根据你想要的效果而略有不同.本文会教你如何设置单色背景.图片背景.渐变背景或动态变色 ...

  • 用CSS怎么设置网页的背景色

    下面咱们来看看用css怎么设置网页背景颜色. 操作方法 01 首先打开电脑上自带的记事本程序,然后输入html网页基本结构语句.<html><body></body> ...

  • 如何在wps2019中设置渐变双色页面背景

    当我们在使用电脑的时候,如果需要处理文档的话,一般都会用到wps2019软件,那么在wps2019中,如何设置页面背景颜色为渐变双色呢?接下来就由小编来告诉大家.具体如下:1. 第一步,打开电脑并在桌 ...

  • 怎么设置PPT文档渐变背景

    经常能在网上看到一些非常漂亮的PPT模板,有些用户想知道怎么设置PPT文档渐变背景,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的PPT文档.2. 第二步根据下图箭头 ...

  • PowerPoint怎么给幻灯片设置渐变填充背景

    PowerPoint是现在十分常用的办公软件之一,有些新用户不知道该软件怎么给幻灯片设置渐变填充背景,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的PPT文档,接着 ...