Question

我有一个带有<A>链接的文本（DIV＃my_text），我想要放置一个水印（DIV＃watermark fixed，z-index：5，background-image和opacity：.5）结束此文字，但我想要点击链接。

实际上我有一个解决方案：重复#my_text与z-index：10和不透明度：0但我不喜欢它有很多原因（如：悬停问题）。

建议？

Answer 1

尝试将pointer-events: none;添加到水印DIV。这将允许您单击它到底层元素。

#watermark {
  width: 200px;
  height: 100px;
  background-color: blue;
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
}
#text {
  position: absolute;
}

<a id="text" href="http://stackoverflow.com">This link is clickable</a>
<div id="watermark">

</div>

JSFiddle：https://jsfiddle.net/9a1n5o5a/1/

Answer 2

您可以使用pointer-events: none点击＆＃34;通过＆＃34;以上元素：

＆＃13;

div, a {
  display: block;
  height: 3em;
  left: 1em;
  position: absolute;
  top: 1em;
  width: 3em;
}

#under {
  background-color: red;
  z-index: 0;
}

#above {
  background-color: blue;
  opacity: .5;
  pointer-events: none;
  z-index: 1;
}

＆＃13;

<a id="under" href="http://google.fr"></a>
<div id="above"></div>

＆＃13;

CSS：水印文字但链接可点击？

2 个答案: