CSS背景不透明度[重复]

本文翻译自：CSS Background Opacity [duplicate]

This question already has an answer here: 这个问题已经在这里有了答案：

• How do I give text or an image a transparent background using CSS? 如何使用CSS为文本或图像提供透明背景？ 28 answers 28个答案

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>

I expected this to make the background have an opacity of 0.4 and the text to have 100% opacity. 我希望这可以使背景的不透明度为0.4，文本的不透明度为100％。 Instead they both have an opacity of 0.4. 相反，它们都具有0.4的不透明度。

---

#1楼

参考：https://stackoom.com/question/hjU5/CSS背景不透明度-重复

---

#2楼

Children inherit opacity. 儿童会遗传不透明度。 It'd be weird and inconvenient if they didn't. 如果他们不这样做，那将会很奇怪和不便。

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color. 您可以为背景图像使用半透明的PNG文件，也可以为背景颜色使用RGBa（α表示）颜色。

Example, 50% faded black background: 例如，50％的黑色背景褪色：

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

---

#3楼

This is because the inner div has 100% of the opacity of the div it is nested in (which has 40% opacity). 这是因为内部div具有嵌套的div的不透明度的100％（不透明度为40％）。

In order to circumvent it, there are a few things you could do. 为了规避它，您可以做一些事情。

You could create two separate divs like so: 您可以这样创建两个单独的div：

<div id="background"></div>
<div id="bContent"></div>

Set your desired CSS opacity and other properties for the background and use the z-index property ( z-index ) to style and position the bContent div. 为背景设置所需的CSS不透明度和其他属性，并使用z-index属性（ z-index ）设置bContent div的样式和位置。 With this you can place the div overtope of the background div without having it's opacity mucked with. 这样，您可以将div放置在背景div的上方，而不会使其变得不透明。

---

Another option is to RGBa . 另一种选择是RGBa 。 This will allow you to nest your divs and still achieve div specific opacity. 这将允许您嵌套div并仍然实现div特定的不透明度。

---

The last option is to simply make a semi transparent .png image of the color you want in your desired image editor of choice, set the background-image property to the URL of the image and then you won't have to worry about mucking about with the CSS and losing the capability and organization of a nested div structure. 最后一个选择是简单地在所需的图像编辑器中制作所需颜色的半透明.png图像，将background-image属性设置为图像的URL，这样就不必担心变色了。使用CSS并失去嵌套div结构的功能和组织。

---

#4楼

I would do something like this 我会做这样的事情

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS: CSS：

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

It should work. 它应该工作。 This is assuming you are required to have a semi-transparent image BTW, and not a color (which you should just use rgba for). 这是假设您需要具有半透明的图像BTW，而不是颜色（应使用rgba来实现）。 Also assumed is that you can't just alter the opacity of the image beforehand in Photoshop. 还假定您不能只预先在Photoshop中更改图像的不透明度。

---

#5楼

You can use CSS 3 :before to have a semi-transparent background and you can do this with just one container. 您可以使用CSS 3 :before具有半透明的背景，并且只用一个容器即可。 Use something like this 使用这样的东西

<article>
  Text.
</article>

Then apply some CSS 然后应用一些CSS

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Sample: http://codepen.io/anon/pen/avdsi 范例： http ： //codepen.io/anon/pen/avdsi

Note: You might need to adjust the z-index values. 注意：您可能需要调整z-index值。

---

#6楼

The following methods can be used to solve your problem: 可以使用以下方法解决您的问题：

1. CSS alpha transparency method (doesn't work in Internet Explorer 8): CSS alpha透明方法（在Internet Explorer 8中不起作用）：

    #div{background-color:rgba(255,0,0,0.5);} 

2. Use a transparent PNG image according to your choice as background. 根据您的选择使用透明的PNG图像作为背景。

3. Use the following CSS code snippet to create a cross-browser alpha-transparent background. 使用以下CSS代码段创建跨浏览器的alpha透明背景。 Here is an example with #000000 @ 0.4% opacity 这是不透明度为0.4％时#000000的示例

    .div { background:rgb(0,0,0); background: transparent\\9; background:rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); zoom: 1; } .div:nth-child(n) { filter: none; } 

For more details regarding this technique, see this , which has an online CSS generator. 有关此技术的更多详细信息，请参阅this ，它具有一个在线CSS生成器。