图像叠加在网站上，但保持内容可点击 [英] image overlay on site but keeping content clickable

问题描述

我正在工作的网站的设计师要求将一些细微的设计散布在网站内容的顶部上.这些设计全部都在PNG中，而PNG大多是透明的.我能弄清楚这一点的唯一方法是在整个站点上放置一个div，并使其背景成为该图像.这看起来是正确的，但是却使站点无法使用，因为可以单击叠加层后面的任何内容(即使可以看到).如果我更改叠加层的z-index以便可以单击内容，则叠加层最终会出现在其他元素之后，这是不允许的.

The designer of a site I am working on requires that some subtle designs be scattered around on top of the content of the site. These designs are all in a PNG which is mostly transparent. The only way I can figure out to get this to work is to put a div over the entire site, and make its background that image. This looks correct, but renders the site unusable, since nothing behind the overlay can be clicked (even though it can be seen). If I change the z-index of the overlay so that things can be clicked, then the overlay ends up behind other elements, which is not allowed.

这是展示问题的JS小提琴-基本上是:

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

这篇关于图像叠加在网站上，但保持内容可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！