一是设置背景透明度。 第二种是使用不透明度属性。
在跳过一些陷阱之后，我建议设置背景透明度，为什么？
大家想一想，我们为什么要实现功效透明呢？
大多数情况下，父包设置的是漂亮或者炫酷的背景图，而子包想要达到一定的透明效果，然后打造出非常高贵的效果。 类似下面的疗效（图片是从网上随机找的，图片来源）。
为什么我建议设置背景透明度而不是使用不透明度属性？
因为背景的透明效果只作用于背景，但是opacity属性会影响子包中的所有内容，最重要的是文字和图片的颜色也会受到影响css 背景图片透明，也就是很混乱。
如右图，项目中为父包设置了炫酷的背景图，为子包设置了透明效果。 opacity属性在UI小哥给出的设计中使用，代码如下：
当我设计整体结构的时候，我并没有意识到哪里错了，当具体内容放上去的时候，我才意识到错了。 看下面的文字和图片，原来的文字颜色是黄色，但实际上是偏灰色的效果； 画面还带有灰色效果，显得暗淡无光。
查了很多资料，看到有的说要用定位等解决方案，发现很麻烦。 没有找到合适的解决办法，只好先放弃这个属性，担心~
没有办法用background来解决，因为上面已经使用了这个属性，并且还设置了相应的透明度。
在跟进代码的时候，我突然灵光一闪。 将opacity设置的透明度添加到背景透明度中，作为背景新的透明度，就可以了！ ！ ！
代码如下所示：
疗效非常好：
因此，为了防止子包的内容（文字、图片等）失去原有的设计色彩，尽量不要使用opacity属性。
至于具体的具体透明度设置：
rgba()中的a代表透明度，与opacity属性相同，值在0到1之间，表示从完全透明到完全不透明。
至于背景和边框的线性渐变设置，稍后会整理一篇博客。
如果你想给背景设置一个图标css 背景图片透明，同时设置透明度，该怎么办呢？ 尽管有两种方法可以实现这一目标：
直接为目标模块设置不透明度属性，为目标模块的背景设置透明度属性，创建一个与目标模块大小相同的模块，绝对浮动在其上，然后为不透明度设置相应的透明度。 将此模块覆盖到目标模块内并设置 z-index:-1;。
分别取得的疗效如下：
总体来说，我觉得没有什么区别，而且仔细看字体，“主要内容区域1”的字体受到透明度的影响，而“主要内容区域2”的字体则不受透明度影响。 当字体较多时，对比就非常明显了：
这样可以看出，所以推荐第二种形式，这样在调整图片透明度的时候，字体颜色就不会受到影响，或者我把内容区域的图片缩小了。
这样是不是更明显了。 至于为什么z-index:-1; 设置，是因为浮动级别高于文档流。 如果不提高其级别，会导致标识覆盖具体内容，如下：
事实上，如果你想要这些样式，你不需要设置z-index。
代码如下所示：
主要内容区1
主要内容区2
