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

全栈程序员-用户IM • 2022年5月25日下午8:20 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

上期在谈到border的用途的时候，在最后列举的两个实例中均用到了一个transparent属性值，从字面意思也知道，这个属性值其实和颜色是并列的，不过它表示的是透明。一般的HTML标签在未指定其背景的时候默认就是透明的。

我们发现在上个实例在谷歌浏览器中用调试工具查看其CSS属性的时候，transparent自动变成了如图1-1所示的rgba(0,0,0,0)。这说明两者基本是等价的。

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

图1-1

RGBA是CSS3.0引入的，RGB我们都很熟悉，A即指alpha通道，百度中对alpha通道的定义如图1-2所示。里面有很多专业术语，其实可总结为它就是用来定义透明度的。

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

图1-2 alpha通道定义

但是在CSS3.0没来之前要想定义一个半透明的区域，主要用到opacity属性值，而本文也主要讲opacity和alpha通道的区别。我们先来看两个各自运用的实例。

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

图1-3 opacity运用

图1-3对应CSS代码如下：

        div {
            width: 100px;
            height: 100px;
            background: #000000;
            border: 1px solid #000000;
            opacity: 0.5;
        }

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

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

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/141462.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...