div的背景不透明而不影响IE 8中包含的元素？

Question

我想设置div的背景的不透明度而不影响IE 8中包含的元素.有任何解决方案并且不回答设置1 X 1 .png图像并设置该图像的不透明度,因为我使用动态不透明度和颜色管理员可以更改那

我用过但不在IE 8中工作

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

和

rgba(0,0,0,0.3)

也.

Answer 1

该opacity风格的影响在它整个元素和一切.对此的正确答案是使用rgba背景颜色.

CSS非常简单:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

...前三个数字是背景颜色的红色,绿色和蓝色值,第四个是"alpha"通道值,其工作方式与opacity值相同.

有关详细信息,请参阅此页面:http://css-tricks.com/rgba-browser-support/

不利的一面是,这在IE8或更低版本中不起作用.我上面链接的页面还列出了一些它不起作用的其他浏览器,但它们现在都很老了; 除IE6/7/8外,目前使用的所有浏览器都可以使用rgba颜色.

好消息是,您可以使用名为CSS3Pie的黑客强制IE使用它.CSS3Pie为旧版本的IE添加了许多现代CSS3功能,包括rgba背景颜色.

要将CSS3Pie用于背景,您需要为-pie-backgroundCSS 添加特定声明以及PIE behavior样式,因此样式表最终将如下所示:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

希望有所帮助.

[编辑]

正如其他人所提到的,它可以使用IE的filter样式和gradient关键字.CSS3Pie解决方案实际上在幕后使用了相同的技术,但是你不需要直接使用IE的过滤器,所以你的样式表更加清晰.(它还添加了许多其他不错的功能,但这与此讨论无关)

Answer 2

它很简单,你唯一能做的就是给予

background: rgba(0,0,0,0.3)

&for IE使用此过滤器

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

你可以从这里生成你的rgba过滤器http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Answer 3

opacity 在parent元素上为整个子DOM树设置它

您不能为某些不会级联到后代的元素设置不透明度.这不是CSS的opacity工作原理我害怕.

你可以做的是在一个容器中有两个兄弟元素并设置透明的位置:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

然后你必须设置透明,position: absolute/relative以便它的内容兄弟将被渲染.

rgba 可以做彩色背景的背景透明度

rgba元素的颜色设置background-color当然会有效,但它会限制你只使用颜色作为背景.没有图像我害怕.如果你提供渐变色彩,你当然可以使用CSS3渐变rgba.这也有效.

但请注意,rgba您所需的浏览器可能不支持.

无警报模态对话框功能

但是如果你正在对整个页面进行某种掩饰,通常可以通过添加一组单独div的样式来完成:

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

然后,当您显示内容时,它应该更高z-index.但这两个因素在兄弟姐妹或其他任何方面都没有关系.他们只是按照应有的方式展示.一个在另一个上面.