css - 如何: watermark behind all elements

Question

有没有办法让页面中间的水印显示在可点击按钮后面？

http://jsfiddle.net/fg7m3/533/

.watermark {
    position: absolute;
    opacity: 0.25;
    font-size: 3em;
    width: 100%;
    text-align: center;
    z-index: 1000;
}

您可能需要调整浏览器的大小以使按钮位于水印的正上方，以确保按钮在与水印重叠时无法点击。

Answer 1

在水印上执行pointer-events:none。

这告诉浏览器不要对该元素执行任何点击事件 - 而是点击按钮。

Here is the updated fiddle

p {
    background-color: #6cc;
}

body {
    background-color: #ccc;
}

.watermark {
    position: absolute;
    opacity: 0.25;
    font-size: 3em;
    width: 100%;
    text-align: center;
    z-index: 1000;
    pointer-events:none;
}