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