opacity
opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。
当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值。
rgba
r：红色值；g：绿色值；b：蓝色值。三个颜色值组合在一起就形成最终颜色。
a：alpha 透明度，表示像素不透明性的值。像素越不透明，则隐藏越多呈现图像的背景。取值 0~1 之间。0表示完全透明的像素，1表示完全不透明的像素。
transparent
设置元素的背景颜色为透明，是颜色的一种，这种颜色叫透明色。
书写格式：
background-color: transparent;
LintCode官方题解
官方题解
发布于 2022-02-27
Chrome
解题思路
通过 CSS 中的 opacity 属性改变不透明度
题解代码
style.css
chrome
1
2
3
4
5
6
7
8
9
.light{
opacity: 0.2;
}
.medium{
opacity: 0.5;
}
.heavy{
opacity: 0.8;
}
知识点
opacity
opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。
当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值。
opacity 的取值
| 取值 | 作用 |
|---|---|
| 数值 | 选取 0.0 到 1.0 范围内的数字值，这个数值既包含也代表通道的透明度。任何一个溢出这个取值区间的值，尽管有效但会被解析为在取值范围内最靠近它的值。 |
| 数值的取值范围 | 含义 |
|---|---|
| 0 | 元素完全透明（元素不可见） |
| (0.0, 1.0) | 元素半透明（元素后面的背景可见） |
| 1 | 元素完全不透明（即元素后面的背景不可见） |
现在我们来回顾一些基础知识点：
rgba
r：红色值；g：绿色值；b：蓝色值。三个颜色值组合在一起就形成最终颜色。
a：alpha 透明度，表示像素不透明性的值。像素越不透明，则隐藏越多呈现图像的背景。取值 0~1 之间。0表示完全透明的像素，1表示完全不透明的像素。
书写格式：
1
background-color: rgba(255, 255, 255, 0.5);
transparent
设置元素的背景颜色为透明，是颜色的一种，这种颜色叫透明色。
书写格式：
1
background-color: transparent;
rgba，transparent 和 opacity 属性 的区别
opacity是作为一个完整的属性出现，transparent和rgba作为属性值出现。opacity相对于整个元素起作用，就像拿一块玻璃（遮罩层）盖在了这个元素上，盖上的地方都会受到影响。而transparent和alpha是对元素的某个属性起作用的，任何需要设置颜色的地方都可以根据情况使用transparent或rgba，如背景颜色、边框颜色、字体颜色等等。- 由于
opacity和alpha设置的透明程度可调，就会产生子元素可否继承的问题。其中，alpha值不存在继承。
opacity: 0;，display: none; 和 visibility: hidden 的区别
opacity: 0;意思是设置透明度为 100%，设置该属性的元素会被隐藏，但仍占据空间；设置了visibility: hidden;的元素被隐藏，但是将继续占据空间；使用display: none;将不占据空间opacity: 0;属性不会触发重绘，性能较高；visibility: hidden;改变时会引起重绘，性能较高；display: none;改变时会引起重排，性能较差。opacity: 0;和visibility: hidden;会被子元素继承，但设置了opacity: 0;元素的子元素不能通过修改数值为1来取消隐藏， 设置了visibility: hidden;元素的子元素可以通过修改属性值为visible来取消隐藏；display: none;不会被继承，因为隐藏父元素时，子元素也不会显示- CSS 属性
transition中支持opacity和visibility，不支持display。
