CSS 背景色 背景图片 渐变背景 - 线性渐变 background-image: linear-gradient()

linear-gradient() 函数用来建立线性渐变的图片

---

基础语法：

background-image: linear-gradient( 
	[ angleValue, ]  
	SPointColor SPointPosition, 
	[ MPointColor MPointPosition, ] 
	[ EPointColor EPointPosition ] 
)

参数说明：

参数	说明	备注
angleValue	定义渐变的方向 可能的值 没有值 == 从上到下 0deg == 从下到上 left == 从左到右 left top == 从左上角到右下角	使用 0deg 这样的形式 能够接受负数 表示 逆时针旋转 -90deg === 270deg
SPointColor	起始点的颜色值 能够是任意合法的颜色表示方式 例如： red / blue #ccc / #000 rgb(0,0,0) rgba(0,0,0,0) ……
SPointPosition	起始点的位置 通常采用 “20%“ 这样的百分数表示 没有这个参数表示 “0%” 容器的边缘开始
MPointColor	中间点的颜色 能够有 也能够没有
MPointPosition	中间点的位置 若是没有中间点颜色 只有中间点的位置 那么这个点的位置 就是 SPointColor 同 EPointColor 权重相等的位置 若是没有 MPointColor 和 MPointPosition 参数 ,那么 SPointColor 同 EPointColor 权重相等的位置位于 SPointPosition 和 EPointPosition 的正中间
EPointColor	结束点的颜色
EPointPosition	结束点的位置	结束点位置的值 能够大于 100% ，例如 200% 也是合法的

• 备注说明：
  • 通常而言 SPointPosition < MPointPosition < EPointPosition; 若是 SPointPosition > MPointPosition 那么 SPointColor 会遮盖住 MPointColor ,遮盖的范围是从 0% ~ SPointPosition ，这个范围内没有没有渐变效果，是 SPointColor 的纯色；

---

• 实例效果

  • 只有 SPointColor 和 EPointColor 两个参数的效果

  background-image: linear-gradient( red, blue );

  ---

  • 带有 angleValue 、SPointColor 和 EPointColor 参数的效果

  background-image: linear-gradient( left, red, blue );

  ---

  • angleValue 使用角度表示的效果

  background-image: linear-gradient( 45deg, red, blue );

  ---

  • angleValue 是负数 同时 有中间点的效果

  background-image: linear-gradient( -45deg, red 0%, yellow 20%, blue 90% );

  ---

  • 没有 MPointColor 可是有 MPointPosition 的效果

  background-image: linear-gradient( 90deg, red 0%, 30%, blue 100%);

---

备注

1. linear-gradient() 函数定义的是一个渐变的图片，而不是渐变颜色 ，因此搭配的是 background-image 而不是 background-color

---

相关内容：
CSS 背景色 背景图片 渐变背景 - 重复线性渐变 background-image: repeating-linear-gradient()
CSS 背景色 背景图片 渐变背景 - 径向渐变 background-image:radial-gradient()