用CSS如何设置网页渐变背景?

html-css07

用CSS如何设置网页渐变背景?,第1张

在background-image属性中使用linear-gradient()。

background-image:<bg-image> [ , <bg-image> ]

<bg-image> = <image> | none

默认值:none

适用于:所有元素

继承性:无

动画性:否

计算值:指定值

取值:

none:无背景图。

<image>:使用绝对或相对地址指或者创建渐变色来确定图像。

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值:

下述值用来表示渐变的方向,可以使用角度或者关键字来设置:

<angle>:

用角度值指定渐变的方向(或角度)。

to left:

设置渐变为从右到左。相当于: 270deg

to right:

设置渐变从左到右。相当于: 90deg

to top:

设置渐变从下到上。相当于: 0deg

to bottom:

设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。

<color-stop> 用于指定渐变的起止颜色:

<color>:

指定颜色。

<length>:

用长度值指定起止色位置。不允许负值

<percentage>:

用百分比指定起止色位置。

说明:

用线性渐变创建图像。

如果想创建以对角线方式渐变的图像,可以使用 to top left 这样的多关键字方式来实现。

conic-gradient是圆锥渐变,以一个点为中心起始点,沿着圆周变化。

语法: conic-gradient( from 起始角度 at 中心点位置, 渐变断点 )

兼容性:

一个简单的例子:看清他的渐变方向,起始点是图形中心,然后以顺时针方向绕中心实现渐变效果。

linear-gradient 线性渐变的方向是一条直线,可以是任何角度,向下/向上/向左/向右/对角方向。看一个简单的例子。repeating-linear-gradient()表示重复的线性渐变。

语法: background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

为了创建一个线性渐变,你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

径向渐变是从圆心点以椭圆形状向外扩散。

语法: background-image: radial-gradient(shape size at position, start-color, ..., last-color)

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

repeating-radial-gradient() 函数用于重复径向渐变。

https://gitee.com/susuhhhhhh/css_demos