CSS过滤器整页 [英] CSS filter on whole page

问题描述

我想知道我是否可以在整个页面上放置一个css过滤器，以便您可以看到该页面，但它在顶部有一个灰色的过滤器，没有什么可以通过点击页面，因为过滤器在上面。

i want to know if i can put a css filter on a whole page so that you can see the page, but it has a slightly grey filter on top and nothing can by clicked on the page because the filter is on top.

推荐答案

这可以通过放置一个空的重叠div（< div id =overlay < / div> ），其格式如下：

This can be achieved by placing an empty overlay div (<div id="overlay"></div>) at the bottom of your DOM, with the following style:

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

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

You'll need to be careful if you have declared any z-indexes. Also, the overlay div may need some JavaScript treatment in case the document height is greater than the viewport's.

这篇关于CSS过滤器整页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！