html - 图像叠加在网站上，但保持内容可点击

我正在工作的网站的设计师要求将一些微妙的设计散布在网站内容的顶部。这些设计全部都在一个PNG中，而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%;
}

该链接将不可点击。

最佳答案

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

关于html - 图像叠加在网站上，但保持内容可点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26007744/