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()

发布了3 篇原创文章 · 获赞 0 · 访问量 47
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览