使用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实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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获得当前的脚本网址
2007/12/10 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
奇妙的js
2007/09/24 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
vue中appear的用法
2017/08/17 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python实现求最长回文子串长度
2018/01/22 Python
python保存网页图片到本地的方法
2018/07/24 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
妇科医生自荐信
2013/11/05 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
优秀教研组申报材料
2014/12/26 职场文书
离婚协议书范文
2015/01/26 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
团支部书记竞选稿
2015/11/21 职场文书