如何:所有元素背后的水印

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。

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

这是最新的小提琴

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

Answer 2

试着按照这种方法来做，因为你认为它是正确工作的^^

​

.container {
  display: table;
}

.watermark {
  position: absolute;
  z-index: -1;
  font-size: 100px;
  color: blue;
}

<div class="container">
<div class="watermark">Watermark</div>
<label>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</label>
<button type="button">Click me, you can!</button>
</div>

​