背景渐变如何设置透明度

背景渐变如何设置透明度

 

项目最近这几天正在做不同主题的颜色配置方案，要根据用户输入的颜色来配置整个主题的颜色，让人头疼的是，其中一个主题所有的列表头部背景色都是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%)