Question

我想在我的网站上做一些覆盖灰色布局的事情，以便有机会在整个网站上应用像“Instagram”这样的颜色效果。我正在尝试将所有元素的不透明度设置为.9并将身体背景设置为我想要在我的网站中获得的颜色。这种方法的结果并不令人满意。

我无法在我的网站上添加叠加层，因为我希望能够与te网站进行互动，所以......任何人都有想法获得这种效果吗？

也许使用叠加并使用jQuery跟踪点击并尝试在下面的图层上应用点击？有人试过吗？

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/

有没有办法用jQuery应用叠加颜色效果？

2 个答案: