使用css3背景渐变中的透明度来设置不同颜色的背景渐变


Posted in HTML / CSS onMarch 31, 2014

项目最近这几天正在做不同主题的颜色配置方案,要根据用户输入的颜色来配置整个主题的颜色,让人头疼的是,其中一个主题所有的列表头部背景色都是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)可以使渐变颜色处在不同值的透明度下,也就是说通过透明度,背景可以呈现不同透明度下的背景颜色。

下面图片是用上面代码生成的背景渐变:
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
是不是看不出渐变透明(感觉灰灰的)?没错,因为颜色取值是从白到黑,那中间的过渡色自然就是灰色的了。但是如果你在加上一个背景颜色的话,那效果就出来了。

比如我们加个background-color: #92D050:
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
你只需要配置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), 而透明度的设置就看你自己想要什么样的渐变效果了。

下面是几个不同渐变色的例子:
使用css3背景渐变中的透明度来设置不同颜色的背景渐变 

复制代码
代码如下:

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%);

使用css3背景渐变中的透明度来设置不同颜色的背景渐变
复制代码
代码如下:

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%);

使用css3背景渐变中的透明度来设置不同颜色的背景渐变
复制代码
代码如下:

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%);
HTML / CSS 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
你应该知道的30个css选择器
Mar 19 #HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 #HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 #HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 #HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 #HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 #HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 #HTML / CSS
You might like
遭遇php的in_array低性能问题
2013/09/17 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
JavaScript 继承的实现
2009/07/09 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
ExpressJS入门实例
2015/01/14 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python实现KNN邻近算法
2021/01/28 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
前台接待的工作职责
2013/11/21 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
中学生期末评语
2014/02/03 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏