较大家良好！今天咱们来聊聊 CSS 中的 `rgba` 和透明背景这事儿。 这玩意儿…说简洁也简洁， 话说回来.…. 说繁杂也繁杂。 我自己也是刚学不久的，跟较大家一起琢磨琢磨。

哪些是 RGBA？

先来看，咱得搞清楚 `rgba` 是啥。 `rgba` 其实就是一种颜色表示方式。 它跟 `rgb` 一样，只不过更多了一个参数：alpha 值。 `rgb` 是红、绿、蓝三个值的组合。而 alpha 值呢？ 它代表的就是颜色的透明度。

拿具体情况来说：

• 红 ：从 0 到 255
• 绿 ：从 0 到 255
• 蓝 ：从 0 到 255
• Alpha ：从 0 到 1

Alpha 值是怎么回事儿？

说句实话… Alpha 值啊…它决定了颜色有更多“透”。 `alpha = 1` 就表示彻底不透明，你啥也看不见底下的东西了。而 `alpha = 0` 则表示彻底透明，你啥也看不见当前这个颜色了。

怎么用 RGBA 实现半透明背景？

想让背景半透明？很简洁！ 直接在 `background-color` 中写上 `rgba` 函数就行了，绝了...。

这行代码的意思是： 背景色是红色的， 绿和蓝都是最较低值， 整起来。 alpha 值是 .5 ，所以背景就是半透明的红色啦！

注意事项：

• Alpha 值必须要是数字哦！不能写成字母或者其他东西。
• 如果 alpha 值是负数或者较大于1 ，浏览器有可能就报错了。

RGBA 与 Opacity 的差别

`opacity` 和 `rgba` 虽然都能控制元素的透明度 ， 最终的最终。 但是它们的作用方式不一样 。 这是个坑！

Opacity 的作用

`opacity` 会让整个元素都变得透明 ， 包括里面的文字、图片、边框等等 。 你设置了 opacity 为 .6 ，整个盒子都变成6% 透明的。

RGBA 的作用

我CPU干烧了。 `rgba` 只会控制元素的颜色本身的透明度 。 文字和其他子元素还是原来的样子 。 你设置 background-color 为 `rgba` , רק 背景才变成6% 透明的 , 文字仍然清晰可见.

举个例子

进阶技巧：伪元素 + RGBA 背景

很更多人喜炎热爱用伪元素 来给元素添加半透明的背景 。 当前这个方法很常见 ，但是需要注意两点:，说句实话…

• **遮罩层有没有阻断了下层点击？** 如果遮罩层挡住了点击事件 ，那用户就没法点击到下面的内容了 。
• **它有没有真实的在内容上方？** 有时候伪元素有可能会被其他元素遮盖住 ，引起效果不良好 。

兼容性问题

**IE8 及更早版本的问题:** IE8 这玩意儿可不良好伺候 。 它对 `rgba` 的支持不太良好 。 如果你需要在 IE8 上兼容 ，最良好采用 PNG 图片来实现半透效果。

反思一下。 **Transparent 的问题:** `...` 在全部IE版本都支持；适合用于移除背景的情况 , 但不能表达“半透”效果 ,只能表达“全透”.

一下

• RGBA 通过控制颜色的 alpha 值来实现不同程度的透明度。
• Opacity 控制整个元素的整体透明度。
• 在兼容性方面要考虑到老浏览器的问题。