科技猎CSS3之旅:RGBa颜色 | CSS | 前端观察
CSS3之旅:RGBa颜色
神飞 发表于 28. Feb, 2009, 分类: CSS , 2 条评论 »
标签：css & css3 & RGBA
标签：css & css3 & RGBA
在CSS3中，RGBa 为颜色声明添加Alpha通道。这对于设计师来说是个非常好的消息，他们现在可以在单个元素上声明一个Alpha通道的百分比了。
对介绍不太感兴趣？直接看演示吧
为什么不是opacity?
Opacity 已经被所有主流浏览器所支持了，尽管要使用不同的代码。
1 2 3 4 5 6 | /* IE 8 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE5 - 7 */ filter: alpha(opacity=50); /* Everyone else */ opacity: .5; |
那么你为什么还要哭鼻子呢？这个问题是，如果你在一个元素上设置了opacity ，那就意味着该元素的所有子元素也会被应用同样的设置……所以控制opacity实现非常棒的细节是颇为麻烦的事情的。你不能完全使用它，或者不得不借助于JavaScript.
RGBa前来营救
基于CSS 颜色模型第三版的RGBA 颜色允许界面设计师为独立元素设置一个alpha通道。
RGB值被指定使用3个8位无符号整数(0 – 255)并分别代表红色、蓝色、和绿色。增加的一个alpha通道并不是一个颜色通道——它只是用来指定除其它三个通道提供的颜色信息之外的透明度。
这样我们就可以这样实现：
使用下面的HTML
1 2 3 4 5 6 7 | <ul> <li class="hundred">100%</li> <li class="eighty">80%</li> <li class="sixty">60%</li> <li class="forty">40%</li> <li class="twenty">20%</li> </ul> |
以及CSS
1 2 3 4 5 6 7 | ul{list-style: none} ul li{padding:.5em} ul li.hundred{background:rgba(0,0,255,1)} ul li.eighty{background:rgba(0,0,255,0.8)} ul li.sixty{background:rgba(0,0,255,0.6)} ul li.forty{background:rgba(0,0,255,0.4)} ul li.twenty{background:rgba(0,0,255,0.2)} |
语法小计
CSS 2.1 开发人员可能更喜欢用16进制色彩(例如#ccc) ，这在我的印象中，是用的最广泛的色彩声明。CSS2.1 支持RGB 色彩声明，然而:
1 2 3 4 | /* 十六进制 */ #yourid {color:#46d5de} /* 与下面的 RGB 色彩声明效果一样 */ #yourid {color:rgb(70,213,222)} |
CSS3 RGBa 颜色采用了在语法上的一个很微小的改动:
1 | #yourid {color:rgba(70,213,222,0.5)} |
注意，浏览器对”color:rgb” 和”color:rgba” 是分开处理的。
浏览器支持
RGBa颜色现在在Webkit 和Gecko 核心的浏览器被支持，IE各个版本的浏览器和Opera还都不支持。就像Chris在他关于RGBa的精彩的文章里 提到的，你可以使用一个标准的RGB颜色为那些不支持的浏览器指定一个向下兼容的属性。
1 2 3 4 | div { background: rgb(200, 54, 54); /* 向下兼容 */ background: rgba(200, 54, 54, 0.5); } |
另一个渐进增强或适度降级的例子。
Demo
你可以通过这个demo页面查看实际效果，或者通过Github下载源代码。
原文:CSS3之旅:RGBa颜色
译自:http://shapeshed.com
版权所有，转载请注明出处，谢谢。
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。
您或许也会喜欢：
- CSS3系列教程:RGBA
- 玩转CSS3色彩
- 使用CSS3和RGBa创建超酷的按钮
- RGBa色彩的浏览器支持
- CSS的未来：一些试验性CSS属性
- 用CSS3将你的设计带入下个高度
- CSS3系列教程:HSL 和HSLA
- 理解CSS3线性渐变
- CSS3系列教程:背景图片(背景大小和多背景图)
- CSS3系列教程:透明度
