今天小编跟大家讲解下有关使用css3背景渐变中的透明度来设置不同颜色的背景渐变 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用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%);来源：爱蒂网
