CSS3 不透明度继承
我尝试使用不透明度使背景半透明，但我放入 div 中的任何内容也会呈现半透明。有人知道我该如何解决这个问题吗？这是有问题的代码：
<div class="serviceContainer"> //The transparent div
<div class="overflowAuto">
<div class="left">
<asp:Image ID="img" runat="server" />
</div>
<div runat="server" id="divTitle" class="title table centreWithMargins">
</div>
</div>
<div runat="server" id="divText">
</div>
</div>
和CSS：
.serviceContainer {width:350px; display:table; opacity:0.2; filter:alpha(opacity=20); background-image:url('../Images/glass.jpg'); background-repeat:no-repeat; background-position:center;}
.serviceContainer img, p {opacity:1.0; filter:alpha(opacity=100);} //I tried to set the opacity of the contained elements, but it didnt work
谢谢
im trying to use Opacity to make a background semi-transparent, but any content i put in the div also takes on the semi-transparency. Anyone know how i can circle around this? Here is the code in question:
<div class="serviceContainer"> //The transparent div
<div class="overflowAuto">
<div class="left">
<asp:Image ID="img" runat="server" />
</div>
<div runat="server" id="divTitle" class="title table centreWithMargins">
</div>
</div>
<div runat="server" id="divText">
</div>
</div>
And the css:
.serviceContainer {width:350px; display:table; opacity:0.2; filter:alpha(opacity=20); background-image:url('../Images/glass.jpg'); background-repeat:no-repeat; background-position:center;}
.serviceContainer img, p {opacity:1.0; filter:alpha(opacity=100);} //I tried to set the opacity of the contained elements, but it didnt work
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这取决于“../Images/glass.jpg”的图像大小，但最简单、最跨浏览器的方法可能是将此图像转换为半透明 png 图像。
另一种不太干净的跨浏览器方式（在 ie6 和 ie7 中不起作用）是使用 :before 伪类。
示例代码： http://jsfiddle.net/ZXDvc/
It depends on the image size of "../Images/glass.jpg" but the simplest and most cross-browser way probably would be to convert this image to semi-transparent png-image.
Another, not so clean and cross-browser way (not working in ie6 and ie7) would be to use :before pseudoclass.
Example code: http://jsfiddle.net/ZXDvc/
不要使用不透明度来创建透明度，请使用 rgba(x, x, x, y)，其中 y 是 0 到 1 之间的不透明度级别：
示例：
Don't use opacity to create transparency, use rgba(x, x, x, y) where y is the opacity level between 0 and 1:
example:
不透明度是从父级继承的，因此无论您为子级设置什么，它们都将始终采用父级的不透明度。
有很多技巧和解决方法，但一般来说，最简单的解决方案是将 img / p 放置在一个单独的容器中，该容器直接位于（绝对或其他方式）背景容器的顶部。
Opacity is inherited from the parent, so regardless of what you set for the children, they will always take on the opacity of the parent.
There are plenty of hacks and workarounds, but in general the simplest solution is to place the img / p in a separate container that is positioned (absolutely or otherwise) directly on top of the background container.