css绝对位置阻止文本选择

Question

如何选择文字？我已经用z-index

试了一下

.blue {
  background-color: blue;
}

.lighten {
  opacity: 0.5;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="relative">
  this text cannot be selected
  <div class="absolute blue lighten">
  </div>
</div>

https://codepen.io/anon/pen/Ozpzew

Answer 1

禁用绝对定位元素上的指针事件，它将允许您选择其背后的文本

smtplib

.blue {
  background-color: blue;
}

.lighten {
  opacity: 0.5;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

Answer 2

给定位元素z-index: -1。

.blue {
  background-color: blue;
}

.lighten {
  opacity: 0.5;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div class="relative">
  this text cannot be selected
  <div class="absolute blue lighten">
  </div>
</div>