Question

我想知道我是否可以在整个页面上放置一个css过滤器，以便您可以看到该页面，但它顶部有一个略带灰色的过滤器，因为过滤器位于顶部，所以没有任何内容可以点击页面。

Answer 1

这可以通过在DOM的底部放置一个空的叠加div（<div id="overlay"></div>）来实现，具有以下样式：

#overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: .6;
    filter: alpha(opacity=60);
}

如果您声明了任何z索引，则需要小心。此外，如果文档高度大于视口的大小，则overlay div可能需要一些JavaScript处理。

Answer 2

HTML（将其放在页面底部）：

<div id="overlay"></div>

CSS：

#overlay {
    position:fixed;
    z-index: 100;
    top:0; 
    left:0;
    bottom:0; 
    right:0;
    background-color:rgba(0,0,0,0.2);   
}

如果您想支持后向浏览器（IE8及更低版本），则必须重新调整代码。例如，IE中不支持RGBA。

整个页面上的CSS过滤器

2 个答案: