我正在使用CSS属性：
filter: alpha(opacity=90);
opacity: .9;
想要让 DIV 元素透明，但是当在该元素内添加另一个 DIV 元素时，它也会变为透明。
我只想让外部（背景）的 DIV 元素透明。如何做到？
8个回答
92
Fiddle: 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 rgba or hsla:
Outer div:
background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/
内部div:
background-color: #FFF; /* Background white, to override the background propery*/
编辑
由于您在问题中添加了 filter:alpha(opacity=90)，我认为您也希望在（旧版本的）IE中获得可行的解决方案。这应该可以解决问题（对于最新版本的IE使用-ms-前缀）:
/*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");
我使用了渐变滤镜，始于相同的 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);
- Rob W
12
我曾经也遇到过同样的问题，这是我提出的解决方案，非常简单！
创建一个小的1像素 x 1像素透明图片，并将其保存为 .png 文件。
在您的 DIV 的 CSS 中使用以下代码：
background:transparent url('/images/trans-bg.png') repeat center top;
记得将文件路径更改为您的透明图像。
我认为这个解决方案在所有浏览器中都有效，除了IE6，但我没有测试过。
- 2by
1
本来已经快放弃实现这个效果了，因为代码变得太繁琐，难以保持简单易懂。然后我看到了这个。谢谢。 - youcantryreachingme
1
只需不为该 div 包含背景颜色，它就会变成透明的。
- SAF
1
我猜测OP可能在谈论半透明。 - user1663023
0
我不知道这是否有所改变。但从我的经验来看，嵌套元素的最大不透明度等于其父级元素。
这意味着：
<div id="a">
<div id="b">
</div></div>
Div#a has 0.6 opacity
div#b has 1 opacity
如果 #b 在 #a 内，则其最大不透明度始终为 0.6。
如果 #b 的不透明度为 0.5，则实际上它的不透明度为 0.6*0.5 == 0.3。
- fmsf
0
.modalBackground
{
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 10000;
}
- Vikash pathak
5
这样做不会达到预期的效果，而且滥用 z-index 也可能不是一个好主意 - 更不用说这种用法可能根本没有任何效果。 - John Dvorak
如果不需要 z-index，则不要使用 z-index 属性。只需使用代码的其余部分即可。 - Vikash pathak
那么唯一的影响就是值会从提问者的情况稍微改变，但提问者希望内部元素呈现为不透明。这样做并不能实现这个目的。 - John Dvorak
背景图像：url（'image / img2.jpg'）;
background-repeat：repeat-x在内部图像中使用某些图像并使用此图像 - Vikash pathak
那是什么？如果它是解决提问者问题的建议，那么它应该在答案本身中。 - John Dvorak
0
background-image:url('image/img2.jpg');
background-repeat:repeat-x;
使用一些内部图片并使用它。
- Vikash pathak
0
这是不可能的，因为透明度会被子节点继承，你无法避免这种情况。如果只想让父元素透明，你需要通过定位元素（绝对定位）和它们的 z-index 属性来实现。
- daveoncode
-1
<div id="divmobile" style="position: fixed; background-color: transparent;
z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">
- Danish Jaffer
2
2你的回答有点缺乏信息...我建议你参观一下[tour]，阅读[answer]，然后[edit]你的帖子 :) - Ulysse BN
1虽然我们非常感谢您的回答，但是这个问题已经被提出了5年，并且已经有了一个被接受的解决方案。请尽量避免通过回答来“顶”这些问题，除非该问题尚未被标记为已解决，或者您找到了一个新的和改进的解决方案。同时，请记得提供一些关于您的代码的上下文信息以帮助解释它。查看撰写优秀答案的文档，获取一些有关如何使您的答案更有价值的提示 :) - Obsidian Age
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接