简单总结下opacity、transparent以及rgba

这几个概念最开始学的时候只是有个大致印象，现在复习这部分的知识点，发现不仔细区分一下，还真有点混乱。

三者共同点是都和透明有关。先分着来说一下：

1、opacity用来设置元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明）。
2、transparent是颜色的一种，这种颜色叫透明色。
3、rgba(r,g,b,a)稍复杂一点，

r：红色值；g：绿色值；b：蓝色值。三个颜色值组合在一起就形成最终颜色。
a：alpha透明度。表示像素不透明性的值。像素越不透明，则隐藏越多呈现图像的背景。取值0~1之间。0表示完全透明的像素，1表示完全不透明的像素。

现在，我们来看区别：

1、opacity是作为一个完整属性出现的。transparent和rgba都是作为属性值出现的。

2、opacity是对于整个元素起作用的。打个比方，就像拿一块玻璃糊在了这个元素上，盖上的地方都会受到影响。而transparent和alpha是对元素的某个属性起作用的。任何需要设置颜色的地方都可以根据情况使用transparent或rgba。比如背景、边框、字体等等。哪个属性的颜色设置了transparent，哪个属性就是透明的，完全透明。哪个属性用rgba()设置了透明，就对哪个属性起作用，透明程度可设置。

3、由于opacity和alpha设置的透明程度可调，就引出一个继承的问题。如果一个元素未设置opacity属性，那么它会从它的父元素继承opacity属性的值。而alpha不存在继承。举个例子说明一下：

代码一

<p style="background-color: red; opacity: 1;">1）这是一个p标签，颜色red，opacity值为1</p><span style="background-color: green; opacity: 1; ">2）这是一个span标签，颜色green，opacity值为1</span><p style="background-color: red; opacity: 0.6;">3）这是一个p标签，颜色red，opacity值为0.6<span style="background-color: green; ">这是一个span标签，颜色green，opacity未设置</span></p>

显示结果为：

代码二

            <p style="background-color: rgba(255,0,0,1);">1）这是一个p标签，颜色red，透明度为1</p><span style="background-color: green;">2）这是一个span标签，颜色green，透明度为1</span>            <p style="background-color: rgba(255,0,0,0.5);">3）这是一个p标签，颜色red，透明度为0.5<span style="background-color: green;">（这是一个span标签，颜色green，透明度未设置）</span></p>

显示结果为：

（完）

opacity、transparent以及rgba的区别相关推荐

css： opacity、transparent、rgba 区别
opacity 设置元素的不透明度取值范围:0-1:其中 opacity:0: //元素完全透明(即元素不可见) [盒子和盒子的内容都看不见] opacity:1: //元素完全不透明(即元素后面的 ...
简单总结下opacity、transparent以及rgba
这几个概念最开始学的时候只是有个大致印象,现在复习这部分的知识点,发现不仔细区分一下,还真有点混乱. 三者共同点是都和透明有关.先分着来说一下: 1.opacity用来设置元素的不透明级别,从 0.0 ...
opacity和rgba的区别
opacity和rgba都是css中设置透明度的方式. 文章目录 opacity属性 rbga属性值 opacity和rgba的区别 opacity属性 opacity 属性设置元素的不透明级别. 语 ...
颜色之ARGB与RGB、RGBA的区别与介绍
ARGB 是一种色彩模式,也就是RGB色彩模式附加上Alpha(透明度)通道,常见于32位位图的存储结构. RGB 色彩模式是工业界的一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变 ...
opacity和rgba()的区别
在css中设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置. 1.下图是opacity的效果文字也跟着背景透明 2.下图是rgba() ...
ARGB与RGB、RGBA的区别
ARGB 是一种色彩模式,也就是RGB色彩模式附加上Alpha(透明度)通道,常见于32位位图的存储结构. RGB 色彩模式是工业界的一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变 ...
css hsla和rgba的区别
在CSS3里可以使用RGBA和HSLA两种色彩模式,都可以用来在设置颜色的同时也可以设置它的透明度.RGBA指的是"红色.绿色.蓝色和Alpha透明度"(Red-Green-Blu ...
rgb和rgba的区别关系
rgb和rgba都表示颜色. rgb: 由红绿蓝三种颜色组成,由着三种颜色组合表示不同颜色,取值分别为0-255. rgba: 在rbg的基础上加了alpha透明度,取值在0-1之间.
Transparent和Fade的区别
在shader中对于transparent来说,比较适合玻璃等材质的渲染而对于Fade来说,比较适合消隐材质

opacity、transparent以及rgba的区别

简单总结下opacity、transparent以及rgba

opacity、transparent以及rgba的区别相关推荐

最新文章

热门文章