用透明窗帘褪色背景

这是一个颇受欢迎的问题，我想。用透明窗帘褪色背景

我在寻找crossbrowser CSS黑色不透明层的解决方案。它会隐藏所有的东西。

我的例子：http://jsfiddle.net/pb9jv/。但它不是交叉浏览器。（IE 6+是我的屁股疼痛）。

2011-04-11 fl00r

无论如何，你依靠jQuery，所以你可以用它来扩展窗口大小的div。 IE6在“位置：绝对”拉伸技巧中表现不佳。 – kapa 2011-04-11 13:12:55

尝试加入这个你申请到fadeover（在你的榜样：#black）的CSS样式

filter: alpha(opacity = 50);

编辑：您希望它是透明或不透明，如给出的例子？

2011-04-11 13:05:12 David

透明和不透明之间的区别是什么？举例来说，它可能是0.5不透明或50％透明 – fl00r 2011-04-11 13:08:58

@ fl00r：不透明与透明相反。 100％不透明=透明 – Marnix 2011-04-11 13:13:07

@Marnix，thx，但在我的情况下是相同的。 50％透明= 0.5不透明:) – fl00r 2011-04-11 13:14:17

使用一个简单的div，并应用一个背景图像与您的颜色1px大小的图像。只是一个简单的PNG与你的黑色。

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

它会在整个div上重复自己。

编辑
试想想它，IE6不支持PNG吧？也许你可以看看像slimbox这样的资源。

2011-04-11 13:04:10 Marnix

这是关于透明PNG在Internet Explorer中的工作 – fl00r 2011-04-11 13:06:38

大卫是正确的 - 那就是语法。但是你的小提琴在IE6中无法使用，因为你没有尺寸值。

这里是一个例子： http://jsfiddle.net/4Aw4Q/ 如果你删除了尺寸，元素将不会显示。

2011-04-11 13:09:15 lnrbob

那么100％的高度和100％的宽度呢？它仍然不能在IE 6中工作 – fl00r 2011-04-11 13:10:36

@Marnix如果您使用适当的过滤器IE6不支持PNG。尝试这种对于初学者

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

在设置上述过滤器作为用于跨度或含有图像，并确保宽度和图像的高度被设定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。您可以使用图片，也可以使用不透明度过滤器进行播放。

2011-04-11 13:48:40

回答