使用css3背景渐变中的透明度来设置不同颜色的背景渐变CSS3制作半透明边框(Facebox)类似渐变css实现透明渐变特效的示例代码

项目最近这几天正在做不同主题的颜色配置方案，要根据用户输入的颜色来配置整个主题的颜色，让人头疼的是，其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变，也就是说，要根据用户输入的颜色值生成不同的但相似度很近的渐变颜色。我上网查了些资料，现在也有js支持根据你输入的网页内容自动填充渐变色，但是对于我这种js不是很好的人来说，还是想从css3上找点方法出来。

我发现css3的背景渐变中的透明度可以解决这个问题（前提是背景渐变的颜色是相近的）。

我在这里简单说一下css3背景渐变中的线性渐变。线性渐变的一般结构是：


其中各个浏览器渲染不同，又分为：

Webkit:


渐变类型 - 在属性里-webkit-linear-gradient
渐变从哪开始(top)
颜色取值和在渐变中的位置 (rgba(0,0,0,0.1) 40%)

下面的写法是用于safari旧版本的


渐变类型 (linear)
渐变开始的X Y 轴坐标(0 0 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
颜色取值 (color-stop(40%, rgba(0,0,0,0.1)))

Mozilla:


Firefox渲染渐变的写法和Safari大致相同，不同的是需要将渐变属性改为-moz-linear-gradient

Opera:


按照上面的写法，让Opera浏览器渲染直接将属性改为-o-linear-gradient，是不是很简单？

IE:

IE比较顽固，不支持渐变，但是提供了渐变滤镜


说了这么多，大家对例子里rgba(0, 0, 0, 0.1) 中的0.1是不是很好奇？没错，解决这个头疼问题的关键就是它 - 渐变透明度。设置渐变透明度（值从0.1-0.9）可以使渐变颜色处在不同值的透明度下，也就是说通过透明度，背景可以呈现不同透明度下的背景颜色。

下面图片是用上面代码生成的背景渐变：

是不是看不出渐变透明（感觉灰灰的）？没错，因为颜色取值是从白到黑，那中间的过渡色自然就是灰色的了。但是如果你在加上一个背景颜色的话，那效果就出来了。

比如我们加个background-color: #92D050：

你只需要配置background-color, 就可以让背景呈现不同的渐变色。

完整的代码：


其中rgba()中的颜色(rgb)一般取白色（255，255，255）或者黑色（0,0,0）, 而透明度的设置就看你自己想要什么样的渐变效果了。

下面是几个不同渐变色的例子：
 








所以如果能很好的运用背景渐变的透明度，可以在很大程度上定义统一的背景渐变色，而用户只需要输入一个颜色域，就可以把主题配置成想要的渐变效果。不过遗憾的是，这种方法就现在而言，只能适用于背景渐变颜色相近的主题。多余一种颜色的背景渐变还是得用这种写法

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！