CSS解读之alpha通道与opacity属性的区别

       上期在谈到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通道可以特定对元素的某个属性设定透明值，比如上面的背景、边框、文字等。