Html 如何使用 CSS 使背景 DIV 仅透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7565384/
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
How to make the background DIV only transparent using CSS
提问by Adham
I am using CSS attrubutes :
我正在使用 CSS 属性：
filter: alpha(opacity=90);opacity: .9;
filter: alpha(opacity=90);不透明度：.9；
to make the DIV transparent, but when I add another DIV inside this DIV it makes it transparent also.
使 DIV 透明，但是当我在该 DIV 中添加另一个 DIV 时，它也会使其透明。
I want to make the outer(background) DIV only transparent. How ?
我想让外部（背景）DIV 只透明。如何 ？
回答by Rob W
Fiddle: http://jsfiddle.net/uenrX/1/
小提琴：http: //jsfiddle.net/uenrX/1/
The opacity property of the outer DIV cannot be undone by the inner DIV. If you want to achieve transparency, use rgbaor hsla:
外部 DIV 的不透明度属性不能被内部 DIV 撤消。如果要实现透明度，请使用rgba或hsla：
Outer div:
外格：
background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/
Inner div:
内部div：
background-color: #FFF; /* Background white, to override the background propery*/
EDIT
Because you've added filter:alpha(opacity=90)to your question, I assume that you also want a working solution for (older versions of) IE. This should work (-ms-prefix for the newest versions of IE):
编辑
因为您已添加filter:alpha(opacity=90)到您的问题中，所以我假设您还需要一个适用于（旧版本）IE 的工作解决方案。这应该可以工作（-ms-最新版本的 IE 的前缀）：
/*Padded for readability, you can write the following at one line:*/
filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=1,
startColorStr="#E6FFFFFF",
endColorStr="#E6FFFFFF");
/*Similarly: */
filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=1,
startColorStr="#E6FFFFFF",
endColorStr="#E6FFFFFF");
I've used the Gradient filter, starting with the same start-and end-color, so that the background doesn't show a gradient, but a flat colour. The colour format is in the ARGB hex format. I've written a JavaScript snippet to convert relative opacity values to absolute alpha-hex values:
我使用了渐变过滤器，从相同的start-和 开始end-color，因此背景不显示渐变，而是显示平面颜色。颜色格式为 ARGB 十六进制格式。我编写了一个 JavaScript 代码段来将相对不透明度值转换为绝对 alpha-hex 值：
var opacity = .9;
var A_ofARGB = Math.round(opacity * 255).toString(16);
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB;
else if(!A_ofARGB.length) A_ofARGB = "00";
alert(A_ofARGB);
回答by 2by
I had the same problem, this is the solution i came up with, which is much easier!
我有同样的问题，这是我想出的解决方案，这更容易！
Make a little 1px x 1pxtransparent image and save it as a .png file.
制作一个1px x 1px 的透明图像并将其保存为 .png 文件。
In the CSS for your DIV, use this code:
在 DIV 的 CSS 中，使用以下代码：
background:transparent url('/images/trans-bg.png') repeat center top;
Remember to change the file path to your transparent image.
请记住将文件路径更改为透明图像。
I think this solution works in all browsers, maybe except for IE 6, but I haven't tested.
我认为这个解决方案适用于所有浏览器，也许除了 IE 6，但我还没有测试过。
回答by SAF
Just do not include a background color for that div and it will be transparent.
只是不包括该 div 的背景颜色，它将是透明的。
回答by Vikash pathak
.modalBackground
{
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 10000;
}
回答by Vikash pathak
background-image:url('image/img2.jpg');
background-repeat:repeat-x;
Use some image for internal image and use this.
使用一些图像作为内部图像并使用它。
回答by daveoncode
It's not possible, opacity is inherited by child nodes and you can't avoid this. To have only the parent transparent, you have to play with positioning (absolute) of the elements and their z-index
这是不可能的，不透明度是由子节点继承的，您无法避免这种情况。要只有父透明，您必须使用元素的定位（绝对）及其 z-index
回答by fmsf
I don't know if this has changed. But from my experience. nested elements have a maximum opacity equal to the fathers.
不知道这个有没有变。但是根据我的经验。嵌套元素的最大不透明度等于父元素。
Which mean:
也就是说：
<div id="a">
<div id="b">
</div></div>
Div#a has 0.6 opacity
div#b has 1 opacity
Has #b is within #a then it's maximum opacity is always 0.6
如果 #b 在 #a 内，那么它的最大不透明度始终为 0.6
If #b would have 0.5 opacity. In reallity it would be 0.6*0.5 == 0.3 opacity
如果#b 的不透明度为 0.5。实际上它是 0.6*0.5 == 0.3 opacity
回答by Danish Jaffer
<div id="divmobile" style="position: fixed; background-color: transparent;
z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">
