Question

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

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

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>

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

2 个答案: