css - linear-gradient(transparent, rgba() 40%, rgba())中transparent？

问题描述

问 题

    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    //用线性渐变创建图像 rgba(0,0,0, 0.05) 40%和rgba(0,0,0, 0.10));分别为起始颜色和终止颜色，第一个参数一般是渐变方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角

我们知道第一个参数一般是渐变方向
但是此处的却是transparent参数，该怎么理解它的作用？

解决方案

方向为可选值，默认 to bottom。transparent 作为为渐变色的第一个参数，也就是 0% 时的颜色为完全透明色：

background-image: linear-gradient(transparent 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.10))

linear-gradient 格式：

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

这篇关于css - linear-gradient(transparent, rgba() 40%, rgba())中transparent？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！