css怎样设置div背景色渐变

Css设置
div渐变背景可以让网页看起来更有层次感,那么css怎样设置
div背景颜色渐变呢?今天小编我就来分享一下
css渐变背景的方法。

操作方法

  • 01

    举个例子,既然是要设置div渐变,所以我们就需要先使用一个div标签。

  • 02

    然后在header标签里面设置<div>标签的css样式。

  • 03

    颜色渐变要有一个范围,所以小伙伴们需要给div设定width和height,也就是宽度和高度。

  • 04

    然后设定div的background背景属性,如图所示,背景颜色渐变就用到-webkit-linear-gradient。

  • 05

    接着,在-webkit-linear-gradient里面写top,设定渐变从顶部开始,到底部结束。在这里需要注意的是,写了top就不要写bottom了哦。

  • 06

    之后,再设定颜色的渐变顺序,比如我设置了从白色渐变到蓝色。温馨提示,颜色可以设定多个的哦。

  • 07

    做完这些之后,div背景渐变就成功了哦,是不是很有层次感呢?

(0)

相关推荐

  • CSS设置DIV背景色渐变显示

    在开发网站的时候通常需要对网站的整体颜色进行修改.下面,我们来看看如何用CSS设置DIV背景色渐变显示吧. 操作方法 01 打开软件 可以使用Dreamweaver或Visual studio软件,比 ...

  • css如何设置div固定在底部

    css提供了一个position: fixed的属性,通过这个属性可以设置div固定在浏览器底部. 操作方法 01 新建一个html页面,然后在这个html代码页面创建一个<div>标签, ...

  • css中设置div居中显示的方法

    我们进行页面开发的时候,最经常用的就是div标签了,那么div中的内容如何居中显示呢,下面小编给大家分享一下. 操作方法 01 首先我们用sublime先创建一个html,并且在html里面加入div ...

  • VisualStudio网页怎么设置div标签的背景色?

    Visual Studio2015编辑网页的时候,想要设置div标签的背景色,该怎么设置呢?下面我们就来看看详细的教程. 1.首先,打开一个已有的网页,找到script标签. 2.新建一个函数Setu ...

  • CSS中如何设置div的边框

    您可以根据自己的需要,对div进行设置它的边框样式,或是隐藏掉div的边框.而在开发过程中,您如果使用得当div,它将给您的开发带来很大的便捷. 操作方法 01 首先,您需要创建一个div,对div进 ...

  • css如何根据屏幕宽度设置div高度

    css如何根据屏幕宽度设置div高度 操作方法 01 首先创建或者打开我们的web项目,新建一个html文件和css文件即可,如图所示 02 html页面代码如图所示,定义一个div,然后给一个id属 ...

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

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

  • CSS设置DIV的定位绝对定位和相对定位

    设置DIV或者其他元素在浏览器中显示的位置是HTML布局中重要的一个内用,我们通过合理的布局使得我们的网站美观大方,这里我就来说说如何使用CSS来给div定位. 操作方法 01 首先我不给div定位来 ...

  • 如何用CSS设置DIV边框透明

    如何实现用CSS设置DIV边框为透明呢?我们来看一看. 操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 RGBA在RGB的 ...