0

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

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

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

4

2 回答 2

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/

于 2013-06-19T15:14:43.570 回答
0

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

.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/

于 2013-06-19T15:32:18.710 回答