使用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打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
HTML文本属性&颜色控制属性的实现
Dec 17 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
css3新特性的应用示例分析
Mar 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
纯js+css实现在线时钟
2020/08/18 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python中join函数简单代码示例
2018/01/09 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
精彩的大学生自我评价
2013/11/17 职场文书
大学活动邀请函
2014/01/28 职场文书
精神文明单位申报材料
2014/05/02 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
单身申明具结书
2015/02/26 职场文书
导游词之扬州大明寺
2019/10/09 职场文书