image overlay on site but keeping content clickable

问题

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.

Here's a JS fiddle demonstrating the problem—basically:

<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%;
}

That link will then be unclickable.

回答1:

Add pointer-events: none; to the overlay.

回答2:

Why should the overlay be a background-image? Just make it an img. You can't click on what you can't see anyway.

edit: cut up the overlay into pieces to minimize the transparent areas, and add the img elements to the normal HTML flow.

回答3:

Clone whatever you have under the image (do not copy IDs, of course), place above the image and make it transparent too.

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

opacity should be done cross-browser way. Look at example below

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

Text will not be selectable, of course, but links will work.

ps: And I'm not mentioning image maps ))

来源：https://stackoverflow.com/questions/26007744/image-overlay-on-site-but-keeping-content-clickable

标签

html

css

png