大家好，又见面了，我是你们的朋友全栈君。
上期在谈到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通道可以特定对元素的某个属性设定透明值，比如上面的背景、边框、文字等。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/141462.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...