Html CSS 背景不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10422949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Background Opacity
提问by John Wheal
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. Instead they both have an opacity of 0.4.
我预计这会使背景的不透明度为 0.4，文本的不透明度为 100%。相反，它们的不透明度均为 0.4。
回答by AlienWebguy
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（a 表示 alpha）颜色作为背景颜色。
Example, 50% faded black background:
例如，50% 褪色的黑色背景：
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>回答by daniels
You can use CSS 3 :beforeto have a semi-transparent background and you can do this with just one container. Use something like this
您可以使用 CSS 3:before来获得半透明背景，并且您只需一个容器即可完成此操作。使用这样的东西
<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-indexvalues.
注意：您可能需要调整这些z-index值。
回答by Achyuth Ajoy
The following methods can be used to solve your problem:
以下方法可用于解决您的问题：
CSS alpha transparency method (doesn't work in Internet Explorer 8):
#div{background-color:rgba(255,0,0,0.5);}Use a transparent PNG image according to your choice as background.
Use the following CSS code snippet to create a cross-browser alpha-transparent background. Here is an example with
#000000@ 0.4% opacity.div { background:rgb(0,0,0); background: transparent; background:rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); zoom: 1; } .div:nth-child(n) { filter: none; }
CSS alpha 透明度方法（不适用于 Internet Explorer 8）：
#div{background-color:rgba(255,0,0,0.5);}根据您的选择使用透明的 PNG 图像作为背景。
使用以下 CSS 代码片段创建跨浏览器的 alpha 透明背景。这是一个
#000000@ 0.4% 不透明度的例子.div { background:rgb(0,0,0); background: transparent; 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.
有关此技术的更多详细信息，请参阅此，其中包含一个在线 CSS 生成器。
回答by Peter Lada
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). Also assumed is that you can't just alter the opacity of the image beforehand in Photoshop.
它应该工作。这是假设您需要有一个半透明的图像 BTW，而不是颜色（您应该只使用 rgba）。还假设您不能事先在 Photoshop 中更改图像的不透明度。
回答by ilan weissberg
You can use Sass'transparentize.
您可以使用Sass'transparentize。
I found it to be the most useful and plain to use.
我发现它是最有用和最简单易用的。
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
See more: #transparentize($color, $amount) ? Sass::Script::Value::Color
查看更多：#transparentize($color, $amount) ？Sass::Script::Value::Color
回答by Wael Wafik
.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
回答by zillaofthegods
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. With this you can place the div overtope of the background div without having it's opacity mucked with.
为背景设置所需的 CSS 不透明度和其他属性，并使用 z-index 属性 ( z-index) 设置 bContent div 的样式和位置。有了这个，您可以将 div 置于背景 div 的顶部，而不会使其不透明。
Another option is to RGBa. This will allow you to nest your divs and still achieve div specific opacity.
另一种选择是RGBa。这将允许您嵌套 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 结构的功能和组织。
回答by Ni?o Angelo Orlanes Lapura
Just make sure to put width and height for the foreground the same with the background, or try to have top, bottom, left and right properties.
只要确保前景的宽度和高度与背景相同，或者尝试具有顶部、底部、左侧和右侧的属性。
<style>
.foreground, .background {
position: absolute;
}
.foreground {
z-index: 1;
}
.background {
background-image: url(your/image/here.jpg);
opacity: 0.4;
}
</style>
<div class="foreground"></div>
<div class="background"></div>
