玩转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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python支持多线程的爬虫实例
2019/12/21 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
内部类的定义、种类以及优点
2013/10/16 面试题
档案接收函范文
2014/01/10 职场文书
关于逃课的检讨书
2014/01/23 职场文书
经典广告词大全
2014/03/14 职场文书
消防安全承诺书
2014/05/22 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
《分数乘法》教学反思
2016/02/24 职场文书