html - 整个页面上的 CSS 过滤器

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-index，则需要小心。此外，覆盖 div 可能需要一些 JavaScript 处理，以防文档高度大于视口(viewport)高度。