与透明窗帘的退色背景

Question

我认为这是一个非常受欢迎的问题。

我正在为黑色不透明层寻找 crossbrowser CSS 解决方案。这将隐藏其下的所有内容。

我的例子：http://jsfiddle.net/pb9jv/。但它不是crossbrowser。 （IE 6+是我屁股的痛苦）。

Answer 1

尝试添加您应用于淡入淡出的CSS样式（在您的示例中：#black）

filter: alpha(opacity = 50);

编辑：您希望它像给定的示例一样不透明或透明吗？

Have a look at this, it does work on IE 6

Answer 2

使用简单的div并使用1px大小的图像应用背景图像。只是一个黑色的简单png。

.overlay
{
    background-image:url('myoverlaycolor.png');
}

它将在整个div中重复。

修改
想想看，IE6不支持png吧？也许您可以查看slimbox等来源。

Answer 3

大卫是对的 - 这就是语法。 但是你的小提琴在IE6中不起作用，因为你没有大小值。

这是一个例子： http://jsfiddle.net/4Aw4Q/ 如果删除大小，则元素将不会显示。

Answer 4

@Marnix如果你使用适当的过滤器，IE6确实支持PNG。试试初学者

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngimage.png', sizingMethod='scale');

将上面的滤镜设置为包含图像的span或div元素的类，并确保设置图像的宽度和高度。

也为包含图像的span或div元素设置此类。

.PNGTrans img{
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

因此，必须为包含png图像的父级调用上面的类。

@ fl00r：有一个具有更高z-index的div元素，screen.width和screen.height分别作为widht和height。您可以使用图像，也可以使用不透明度过滤器。