玩转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中Color的一些特性介绍
May 27 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
JS模板实现方法
2013/04/03 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python小白学习包管理器pip安装
2020/06/09 Python
python3处理word文档实例分析
2020/12/01 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
门卫岗位安全职责
2013/12/13 职场文书
给小学生的新年寄语
2014/04/04 职场文书
医院见习报告范文
2014/11/03 职场文书
会议主持人开场白台词
2015/05/28 职场文书
幸福来敲门观后感
2015/06/04 职场文书
开学典礼校长致辞
2015/07/29 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android