使用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轻松实现圆角效果
Nov 09 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 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实现小型站点广告管理(修正版)
2006/10/09 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
nodejs基础应用
2017/02/03 NodeJs
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python单例模式实例解析
2018/08/28 Python
Python给图像添加噪声具体操作
2019/03/03 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
运动会800米加油稿
2014/02/22 职场文书
道路施工安全责任书
2014/07/24 职场文书
员工聘用合同范本
2015/09/21 职场文书
python中的装饰器该如何使用
2021/06/18 Python
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis