搞定div半透明，内容还贼清楚
哥们儿姐们儿，今天跟大家唠唠我前两天捣鼓的一个小玩意儿——就是那个div半透明的效果。
事情是这样的，我当时想做一个效果，就是一个模块，背景得是半透明的，能隐约看到后面的东西，但是，里头的文字和图片又得是清清楚楚、不透明的。听起来简单？我一开始也这么觉得。
上来就试opacity
我寻思这不简单嘛CSS里头有个叫opacity的玩意儿，直接给那个div套上，设个0.5、0.8啥的，不就半透明？
于是我就上手试，代码大概是这样：
.my-box { opacity: 0.7; }
结果？背景确实半透明，可坏，里面的字、图，全都跟着一起“朦胧美”，那叫一个看不清。这效果可不是我想要的，用户体验直接拉胯。
难道要用图片？
我就琢磨，是不是得用张半透明的PNG图片做背景？这方法倒是可行，以前也用过。但我就觉得，为这么个小效果，还得单独切张图，有点小题大做，加载也慢点儿，不爽。我就想，肯定有纯CSS的办法。
柳暗花明又一村：rgba来
碰壁之后，我就不信邪，又去翻翻资料，捣鼓一阵子。然后就发现一个好东西：rgba()。
这玩意儿是用来设置颜色的，跟平时用的rgb()差不多，就是红绿蓝嘛但它多一个“a”，这个“a”就是alpha，管透明度的！范围是从0（完全透明）到1（完全不透明）。
我一看，欸？这不就是我想要的吗？专门控制背景色的透明度，应该不会影响里面的内容？
赶紧试试！
我就把原来的opacity删，改成这样设置背景色：
.my-box { background-color: rgba(0, 0, 0, 0.5); / 半透明的黑色背景 / }
或者你要是白色背景就：
.my-box { background-color: rgba(255, 255, 255, 0.7); / 半透明的白色背景 / }
效果达成，舒服
刷新页面一看，成！背景如愿以偿地变成半透明，能看到底下的东西，而且最关键的是，div里面的文字、图片啥的，都还是原来的样子，一点没受影响，清清楚楚。
这下就舒服，纯CSS搞定，代码也干净。后来我还看到有人说可以用伪元素（就是::before或::after）加个定位啥的也能实现类似效果，但我感觉还是rgba()来得直接方便。
总结一下
- 直接用
opacity会让整个div包括内容都半透明，一般不是我们想要的。 - 用
rgba()或者hsla()来设置background-color或者background，只让背景半透明，内容保持原样。
行，今天就分享这点小经验，希望能帮到有同样困扰的朋友。下次再捣鼓出啥有意思的，再来跟大家唠！