使⽤css3背景渐变中的透明度来设置不同颜⾊的背景渐变
项⽬最近这⼏天正在做不同主题的颜⾊配置⽅案，要根据⽤户输⼊的颜⾊来配置整个主题的颜⾊，让⼈头疼的是，其中⼀个主题所有的列表头部背景⾊都是2到3组渐变值的线性渐变，也就是说，要根据⽤户输⼊的颜⾊值⽣成不同的但相似度很近的渐变颜⾊。我上⽹查了些资料，现在也有js⽀持根据你输⼊的⽹页内容⾃动填充渐变⾊，但是对于我这种js不是很好的⼈来说，还是想从css3上点⽅法出来。
我发现css3的背景渐变中的透明度可以解决这个问题（前提是背景渐变的颜⾊是相近的）。
我在这⾥简单说⼀下css3背景渐变中的线性渐变。线性渐变的⼀般结构是：
复制代码
代码如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
其中各个浏览器渲染不同，⼜分为：
渐变颜代码大全Webkit:
复制代码
代码如下:
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
渐变类型 - 在属性⾥-webkit-linear-gradient
渐变从哪开始(top)
颜⾊取值和在渐变中的位置 (rgba(0,0,0,0.1) 40%)
下⾯的写法是⽤于safari旧版本的
复制代码
代码如下:
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));
渐变类型 (linear)
渐变开始的X Y 轴坐标(0 0 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
颜⾊取值 (color-stop(40%, rgba(0,0,0,0.1)))
Mozilla:
复制代码
代码如下:
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
Firefox渲染渐变的写法和Safari⼤致相同，不同的是需要将渐变属性改为-moz-linear-gradient
Opera:
复制代码
代码如下:
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
按照上⾯的写法，让Opera浏览器渲染直接将属性改为-o-linear-gradient，是不是很简单？
IE:
IE⽐较顽固，不⽀持渐变，但是提供了渐变滤镜
复制代码
代码如下:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF',
EndColorStr='#33000000');
说了这么多，⼤家对例⼦⾥rgba(0, 0, 0, 0.1) 中的0.1是不是很好奇？没错，解决这个头疼问题的关键就是它 - 渐变透明度。设置渐变透明度（值从0.1-0.9）可以使渐变颜⾊处在不同值的透明度下，也就是说通过透明度，背景可以呈现不同透明度下的背景颜⾊。
下⾯图⽚是⽤上⾯代码⽣成的背景渐变：
是不是看不出渐变透明（感觉灰灰的）？没错，因为颜⾊取值是从⽩到⿊，那中间的过渡⾊⾃然就是灰⾊的了。但是如果你在加上⼀个背景颜⾊的话，那效果就出来了。
⽐如我们加个background-color: #92D050：
你只需要配置background-color, 就可以让背景呈现不同的渐变⾊。
完整的代码：
复制代码
代码如下:
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF',
EndColorStr='#33000000');
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
background-color: #669900;
其中rgba()中的颜⾊(rgb)⼀般取⽩⾊（255，255，255）或者⿊⾊（0,0,0）, ⽽透明度的设置就看你⾃⼰想要什么样的渐变效果了。
下⾯是⼏个不同渐变⾊的例⼦：
复制代码
代码如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
复制代码
代码如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%,
#FFFFFF 100%);
复制代码
代码如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.9) 99%);
所以如果能很好的运⽤背景渐变的透明度，可以在很⼤程度上定义统⼀的背景渐变⾊，⽽⽤户只需要输⼊⼀个颜⾊域，就可以把主题配置成想要的渐变效果。不过遗憾的是，这种⽅法就现在⽽⾔，只能适⽤于背景渐变颜⾊相近的主题。多余⼀种颜⾊的背景渐变还是得⽤这种写法
复制代码
代码如下:
background: linear-gradient(to bottom, #396E8E 0%, #336888 29%, #225777 67%, #194E6E 100%);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。