Question

好的，所以继续这笔交易。我有一个我在html和css中创建的页面。我有一个div，其背景需要透明。但是当我使用opacity: .6时; div中的所有内容都可以通过。

有没有办法解决这个问题，所以它适用于safari，IE和firefox？

Answer 1

不，没有真正的方法可以解决这个问题（虽然你可以在CSS3中）。有两种可能的方法：

1）使用透明的png背景，而不是使用CSS（IE6的黑客不允许使用透明的png）

2）使用两个单独的div，并使用绝对定位将一个定位在另一个的顶部。这需要了解某些尺寸，因此可能并不总是适用，但可能适用于您的情况。

Answer 2

.outer {
    position: relative
}
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Or whatever */
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
}

<div class="outer">
    <div class="background"></div>
    Content
</div>

请注意，有时height: 100%的{{1}}规则在IE 6中不起作用，在这种情况下，您应该尝试将.background应用于第一个hasLayout，如果是也没有.outer（您可以添加.background CSS规则hasLayout而没有副作用）。如果这些都不起作用，您可能需要IE 6的zoom: 1值。如果您需要进一步的帮助，请发表评论。

作为smerriman said，在支持CSS3（更具体地说，expression或rgba颜色值）的浏览器中，它更简单。它就像hsla一样简单。

Answer 3

只需使用透明图像作为该元素的背景。当您在css中为给定元素使用不透明度时，该元素中的所有内容（包括该元素）都会接收该样式。看这里：

http://jsfiddle.net/zV4BR/

Answer 4

应该是

不透明度：0.6

旁边的不透明度根据您使用的网络浏览器的不同而有所不同

Answer 5

你应该同时使用

css中的不透明度和

滤波器：α（不透明度= 60）;

表示ie和stuff

Answer 6

使用此方法

How to give cross browser transparency to element's background only?

使用Rgba代替不透明度。请参阅此处的示例：http://jsfiddle.net/ypaTH/

你还必须在内部元素上设置背景。

修改：为IE制作rgab代码使用此http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

CSS透明度问题

6 个答案: