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