使用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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 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
phpwind中的数据库操作类
2007/01/02 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP实现简易计算器功能
2020/08/28 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
C#面试题
2016/05/06 面试题
三个Unix的命令面试题
2015/04/12 面试题
文化宣传方案
2014/03/13 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
平安工地建设方案
2014/05/06 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
初二学生评语大全
2014/12/26 职场文书
工人先锋号申报材料
2014/12/29 职场文书
奖学金个人总结
2015/03/04 职场文书
历史博物馆观后感
2015/06/05 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js