网页文字不能被选中复制的CSS:user-select、z-index

编辑于:2022年05月16日

修改 图片压缩 网站的源码时,发现此网站网页上的文字无法被选中,研究后得知 CSS 样式user-selectz-index都会导致无法复制文字。

user-select

在浏览器中双击或长按文本,文本会被选取或高亮显示,user-select属性则规定了是否允许选取元素的文本,该 CSS 有四个属性值:

  • auto:默认。如果浏览器允许,则可以选择文本。
  • none:防止文本选取。
  • text:文本可被用户选取。
  • all:单击选取文本,而不是双击。

z-index

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,z-index属性(可为负)能够设置元素的堆叠顺序。设置一个透明的全屏尺寸 div,并将 z-index 顺序设置为最高,如此底层的文字就无法被复制了。

  • auto:默认。堆叠顺序与父元素相等。
  • number:使用正负数设置元素的堆叠顺序。
  • inherit:规定应该从父元素继承 z-index 属性的值。

相关推荐

去掉 html 无序列表 ul li 前面的圆点

去掉 html 无序列表 ul li 前面的圆点

无序列表使用 ul li 标签时,每一行内容前都会有个实心圆点,使得展示效果比较显著整齐,但我现在更喜欢使用 Emoji 比如⭕和🚩代替圆点。那么如何去掉默认的实心圆点呢? 方法 只需要在 CSS 样式添加 li{list-style: ...

CSS @media min-width max-width 不生效

CSS @media min-width max-width 不生效

针对不同的屏幕尺寸,显示不同的页面样式,自适应页面的设计免不了使用@media。如果你遇到了 @media 设置无效或多种尺寸样式只有一种生效时,有可能是 @media 的顺序放错了。 CSS样式与DOM/JS一样,从前往后加载,后 ...

暂无评论