CSS背景不透明度 [英] CSS Background Opacity

问题描述

我使用类似于以下代码的内容：

I am using something similar to the following code:

<div style="opacity:0.4; background-image:url(...);">
 <div style="opacity:1.0;">
  Text
 </div>
</div>

我希望这样做使背景具有不透明度为0.4，文本具有100％不透明度。相反，它们都具有0.4的不透明度。

I expected this to make the background have an opacity of 0.4 and the text to have 100% opacity. Instead they both have an opacity of 0.4.

推荐答案

子级继承不透明度。如果他们没有，这将是奇怪和不方便。

Children inherit opacity. It'd be weird and inconvenient if they didn't.

您可以为背景图片使用半透明的png，也可以使用RGBa（a为Alpha）颜色作为背景颜色。

You can use a translucent png for your background image, or use an RGBa (a for alpha) color for your background color.

例如，50％褪色的黑色背景：

Example, 50% faded black background:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

这篇关于CSS背景不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！