jquery - 有什么方法可以使用 jQuery 应用叠加颜色效果？

Question

我想做一些事情，比如在我的网站上叠加一个灰色布局，以便有机会在整个网站上应用像“Instagram”这样的颜色效果或类似的东西。我正在尝试将所有元素的不透明度设置为 0.9，并将主体背景设置为我想在我的网站中获得的颜色。这种方法的结果并不令人满意。

我不能在我的网站上放置一个覆盖层，因为我希望能够与网站进行交互，所以......有人有想法得到这种效果吗？

也许使用 jQuery 的覆盖和跟踪 de clicks 并尝试在下面的图层上应用点击？有人试过吗？

Answer 1

一种解决方案是使用pointer-events，但您必须检查兼容性。每个浏览器都不能很好地支持它，但如果它是用于内部项目或您可以控制的任何东西，这完全可能是一个解决方案：

#overlay{
    position : fixed;
    top :0;
    left:0;
    width : 100%;
    height : 100%;
    background-color : rgba(0,0,0,0.5);
    pointer-events:none;
}

小提琴：http: //jsfiddle.net/6yJvw/

Answer 2

您可以放置​​一个叠加层并仍然与页面交互：

.overlay {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
}

小提琴：http: //jsfiddle.net/lassebjensen/zc9j3/4/