玩转CSS3色彩


Posted in HTML / CSS onJanuary 16, 2010
译自:Playing Around with CSS3 Colors
中文:玩转CSS3色彩

传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)

玩转CSS3色彩

CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们所能,而IE直到Internet Explorer 9才会开始支持一些CSS3属性。

Opacity

这其实是一个旧属性,令人惊奇的是,它被IE的当前版本支持——尽管是以一种比较复杂的方法。

Opacity将整个CSS 对象变透明,所有的子元素的透明度也会适当的继承。官方的语法如下:


复制代码
代码如下:

opacity: [0-1的小数];

所以一个opacity: 0.5;设置会让对象50%透明。尽管较新的浏览器积极的支持它,老的浏览器还是需要一些定制的代码,就像IE浏览器一样。

目前较老的Firefox版本,我们需要使用-moz-前缀,而对于旧的Safari/Chrome版本,我们需要使用-webkit-前缀。而对于更老的还在使用KHTML内核而不是webkit内核的Safari版本来说,我们需要使用-khtml-。那么如果我们想支持每一个浏览器,我们的代码应该是这样的:


复制代码
代码如下:

opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;

啊,稍等!IE怎么办?好吧,IE的确完全不支持这个,但是它使用了一个私有的滤镜。传统的方法简短扼要:


复制代码
代码如下:

filter:alpha(opacity=50);

请注意对于IE我们需要使用从0到100的整数,而不是像opacity属性那样的小数。郁闷的是,Internet Explorer 8提供了一个新的方法来处理。不要尝试像另一个那样记住这个,这是很长的一个:


复制代码
代码如下:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

当然,如果你想支持旧的IE浏览器,你将不得不使用上面的那个短的,这也就意味着如果要兼容绝大部分浏览器,你需要总共六条CSS语句。

PS:事实上,Safari从1.2版本(2004年)就开始支持opacity属性了,KHTML内核的Safai基本很难再找到了,而事实上,Konqueror从未支持过-khtml-opacity属性,所以请不要再使用它(我在翻译的时候考虑到原文的完整性,所以并没有对上面的代码作出修正)。Opera从9.0开始支持CSS3的opacity,而Firefox从Firefox 0.9开始就支持opacity,而到Firefox 3.5就不再支持-moz-opacity私有属性了。IE8的-ms-再加上filter真是微软的天才作品啊!不过请注意,如果你要同时使用filter和-ms-filter,请注意将-ms-filter写在filter的前面。——神飞

RGBa

下面让我们讨论一下RGBa。RGBa是对原始的RGB的扩展,它加入了第四个参数:alpha通道。alpha通道参数采用0 到1之间的小数,就像opacity那样。使用RGBa而不是opacity的优势是,当使用RGBa的时候,透明不会被应用到子元素。这也就一位着,你可以在一个透明对象里面使用一个完全不透明的子对象,而当你使用opacity的时候,透明对象的子元素也是透明的。

使用RGBa不能再简单了:


复制代码
代码如下:

div {
background: rgb(255,0,0); /* The old one */
background: rgba(255,0,0,0.5); /* The new one */
}

正如你看到的那样,我们渐渐通过添加一个字母和另外一个参数就将一个实体的红色变为半透明的红色了。RGBa被Firefox 3+、Safari 3+、Chrome 1.0+以及Opera 10支持。但IE还是不支持。CSS-Tricks 提供了一个使用私有滤镜的方法来让它在IE下也可以工作:

复制代码
代码如下:

<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
>/style>
<![endif]-->

HSL

HSL是一个选择颜色的很直观的方法。如果你需要“再暗一点点儿” 或 “再亮一点点儿”,使用十六进制组合会颇麻烦吧。幸运的是,通过HSL,它就是仅仅一个简单的数字改变。

玩转CSS3色彩

HSL代表Hue(色调、也称“色相”)、Saturation(饱和度)和Lightness(明度)。Hue就是一个色盘中的颜色(参考上图)。色彩选择通过度数来确定,0º 就是红色,120º 是绿色,而240º 就是蓝色。当然,你可以选择中间的不同的色彩组合,这样你就有这些:

  • 0º – 红色
  • 60º – 黄色
  • 120º – 绿色
  • 180º – 青色
  • 240º – 蓝色
  • 300º – 洋红

Saturation(饱和度)是该色彩被使用了多少。0%表示灰度,也就是我们并没有使用这个颜色,而100%表示该颜色很饱满。通俗的讲,饱和度就是颜色的深浅程程度,鲜艳程度

Lightness(明度)也就是该色彩有多亮。较低设置意味着暗,较高设置意味着亮,0% 和100%意味着分别为黑和白。

所以,一个使用橙色的50%饱和度+50%名都的背景的对象看起来就像这样:

div {background: hsl(30, 50%, 80%);}

如果想让它更亮一些或者暗一些,只需要调整最后一个参数就可以了。

HSL被大部分浏览数支持,包括Safari 3.2+、Chrome、Firefox、Opera 9.6+,IE不支持。

HSLA

当然,HSLA 就是HSL 的扩展,就像RGBa一样,添加了第四个透明参数。使用HSLA就像RGBa一样简单,仅仅在那里贴上额外的参数就OK了:

div {background: hsla(30, 50%, 80%, 0.5);}

这个例子也是使用了橙色,但是添加了50%透明。

HSLA被大部分浏览器支持,包括Safari 3.2+、Chrome、Firefox,IE不支持,和HSL不同的是,Opera9.6并不支持HSLA,直到Opera 10才开始支持HSLA。

总结

显然,HSL 和HSLA 只被Firefox、Safari、Chrome和Opera等浏览器的较新的版本支持。而对已IE却没有想opacity和RGBa那样对应的私有属性支持它们两个。然而,这从来不会阻止你尝试或以它们做实验。

HTML / CSS 相关文章推荐
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
需要知道的CSS3动画技术
Jan 01 #HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 #HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 #HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 #HTML / CSS
利用CSS3的定位页面元素
Aug 29 #HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 #HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 #HTML / CSS
You might like
PHP 事件机制(2)
2011/03/23 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
python封装对象实现时间效果
2020/04/23 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Python如何省略括号方法详解
2020/03/21 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
甜品店的创业计划书范文
2014/01/02 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
12岁生日演讲稿
2014/05/14 职场文书
无私奉献演讲稿
2014/09/04 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Linux中如何安装并部署Redis
2022/04/18 Servers
小程序自定义轮播图圆点组件
2022/06/25 Javascript