使用使用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）可以使渐变颜色处在不同值的透明度下，也就是说通过透明度，背景可以呈现不同透明度下
的背景颜色。
下面图片是用上面代码生成的背景渐变：
评论0