上期在谈到border的用途的时候,在最后列举的两个实例中均用到了一个transparent属性值,从字面意思也知道,这个属性值其实和颜色是并列的,不过它表示的是透明。一般的HTML标签在未指定其背景的时候默认就是透明的。
我们发现在上个实例在谷歌浏览器中用调试工具查看其CSS属性的时候,transparent自动变成了如图1-1所示的rgba(0,0,0,0)。这说明两者基本是等价的。
图1-1
RGBA是CSS3.0引入的,RGB我们都很熟悉,A即指alpha通道,百度中对alpha通道的定义如图1-2所示。里面有很多专业术语,其实可总结为它就是用来定义透明度的。
图1-2 alpha通道定义
但是在CSS3.0没来之前要想定义一个半透明的区域,主要用到opacity属性值,而本文也主要讲opacity和alpha通道的区别。我们先来看两个各自运用的实例。
图1-3 opacity运用
图1-3对应CSS代码如下:
- div {
- width: 100px;
- height: 100px;
- background: #000000;
- border: 1px solid #000000;
- opacity: 0.5;
- }
图1-4 alpha通道运用
图1-4对应CSS代码如下:
- div {
- width: 100px;
- height: 100px;
- background: rgba(0,0,0,0.5);
- border: 1px solid #000000;
- }
两个实例均设定背景和边框颜色为黑色,然后设定透明度为50%,但是我们发现在利用alpha通道设定透明度的时候需要单独对每一个设定,而opacity直接就运用在了整个标签上,其实这就是两者最大的区别,总结来说,opacity只能设定整个元素的透明值,而alpha通道可以特定对元素的某个属性设定透明值,比如上面的背景、边框、文字等。
转载来自:http://blog.csdn.net/qinshenxue/article/details/17750777