图片覆盖在网站上，但保持内容可点击

Question

我正在处理的网站的设计者要求将一些微妙的设计分散在网站内容的上。这些设计都是PNG，大部分都是透明的。我能弄清楚这个工作的唯一方法是在整个网站上放置一个div，并将其背景设为图像。这看起来是正确的，但渲染网站无法使用，因为可以点击覆盖后面的任何内容（即使可以看到）。如果我更改叠加层的z-index以便可以单击某些内容，那么叠加层会在其他元素后面结束，这是不允许的。

Here's a JS fiddle demonstrating the problem - 基本上是：

<div class="wrap">
    <div class="overlay"></div>
    <div class="content">
        <img src="some picture"/>
        <p>Here's some shiny happy content.
            <a href="#alink">Click me!</a>
        </p>
    </div>
</div>

.wrap {
    position: relative;
    height: 100%;
}
.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: [the mostly transparent image with side designs];
    background-repeat: repeat-y;
    background-size: 100%;
}

该链接将无法点击。

Answer 1

将pointer-events: none;添加到叠加层。

Answer 2

为什么叠加层应为background-image？ 只需将其设为img即可。你无法点击你无法看到的东西。

编辑：将叠加层剪切成碎片以最小化透明区域，并将img元素添加到普通HTML流中。

Answer 3

克隆图像下的任何内容（当然不要复制ID），将其置于图像上方并使其透明。

.content-above {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
z-index: 10;
}

不透明度应该以跨浏览器的方式完成。请看下面的例子

http://jsfiddle.net/ncf8nex5/1/

当然，文字不可选，但链接可以使用。

ps：我没有提到图像地图））