今天就来聊聊我捣鼓那个半透明背景的事儿。
有时候，设计稿或者自己瞎琢磨，就想让一块区域的背景能透出点后面的东西，但又不是完全透明，还得带点颜色。比如说，一个图片上面浮着一个文字介绍的框框，希望这个框框有点底色，但又能隐约看到下面的图片纹理。
我傻乎乎地就想着直接用那个 opacity 属性，觉得这不就是管透明度的嘛在样式里咔咔一顿写，给那个框框加上 opacity: 0.7; 或者差不多的值。
结果？好家伙，不光背景半透明，里面的文字、图片、按钮啥的全都跟着一起变淡，跟蒙一层雾似的，那哪儿行，文字都看不清。这显然不是我想要的效果。
我就纳闷，这该咋整？是不是得换个思路。然后我就开始琢磨，是不是能只让背景色透明，里面的内容保持原样。
后来琢磨半天，试好几种法子，才发现得用颜色值本身来控制透明度。就是那个 rgba，或者现在有些浏览器也支持带透明度的 hex 颜色值（就是 # 号后面跟8位，两位管透明）。
我当时咋弄的：
第一步：找到目标
先找到我要加半透明背景的那个盒子，比如一个div，给它一个类名或者 ID，方便在 CSS 里选中它。第二步：写样式
然后，就给它的background-color或者直接用background属性下手。第三步：用 RGBA
重点来，不用opacity，而是用rgba()。比如我想搞个半透明的黑色，我就这么写：background-color: rgba(0, 0, 0, 0.5);。这里面，rgb(0, 0, 0)就是黑色，那个0.5就是管透明度的，0 是全透明，1 是完全不透明。你想多透就调这个数值，比如0.7就是 70% 不透明度。第四步：或者用带透明度的 HEX（可选）
现在用带透明度的hex也方便，比如半透明黑色也可以写成background-color: #00000080;。两位 `80` 是十六进制，就大概是半透明的意思，换算一下差不多就是0.5。这个写法更简洁点，但我个人还是习惯用 `rgba`，感觉更直观点。
这么一搞，还真行！
背景确实半透明，能隐约看到后面的内容，但是盒子里的文字、图标啥的，都还是清清楚楚的，完全不受影响。这效果就对嘛
以后再想做这种效果，就别傻乎乎用 `opacity` ，直接在颜色值上下功夫，用 `rgba` 就对。这方法挺实在的，做一些提示框、蒙层或者就是想让界面层次感强点的时候，都用得上。反正我后来做项目，碰到类似需求，基本都这么处理，没再踩过之前的坑。