网页中如何使用透明

其实我写文章算起来也马上两个月了，中途做过很多摸索，也不断的尝试过各个方向，最终的结论还是决定回归主题，文章依然围绕我的老本行－－前端开发进行展开，也许写鸡汤可以更快的增加粉丝，但这段时间的感觉是：增粉并不是我的目的，能帮到更多人，才是我的最终宗旨。

既然是回归主题，那我就每天都来分享一点前端开发行业的一点儿东西吧，不管大小，实用就好。其实说实话，每天写一篇文章真的是一件很不易的事情，我是一个程序猿，很难写出华丽的辞藻，文章难免有一些枯燥乏味，但是如果能给粉丝朋友一点实实在在的帮助，我想依然可以有一帮忠实的粉丝。

从今天起，我将不以增粉为目的的进行分享，在此感谢一开始就关注我的朋友们对我这段时间东拉西扯的包容。今天我给大家分享一个很简单的网页效果，那就是透明。

透明在网页中并不陌生，在很多场景都会用到，比如下面这种情况：

这种情况我们往往只希望背景透明而内容不透明，那到底如何实现呢？

总体上有两种方式：

1、opacity

2、rgba

它们俩有什么区别呢？

作用范围不同。opacity会作用于选择器所对应的元素以及其子元素，里面的内容均会透明。rgba只会让背景透明，内容不会透明，所以大部分情况下使用rgba会更方便一点。

Hi,我是年轻大叔

罗辑思维前端开发工程师，个人微信公众号：xuebing_wxb

热爱互联网技术，更愿意跟大家分享我的经验与心得