网页文字不能被选中复制的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 属性的值。

相关推荐

WordPress 选择什么固定链接形式比较好?

WordPress 选择什么固定链接形式比较好?

WordPress 的设置中有个固定链接选项,可以选择文章、页面、分类和标签等页面链接的形式。从实际出发与各位同学们聊聊,虫子菌为什么采用/p/%postname%.html和cat、tag作为分类和标签的前缀的形式。 文章和页面的自 ...

WordPress 分类和标签页链接结尾添加/斜杠

WordPress 分类和标签页链接结尾添加/斜杠

WordPress 固定链接 自定义结构以.html结尾时,分类和标签页的链接尾部将不会以/结尾,这样的链接一般是无法被缓存的。 两种纯代码添加斜杠的方法 任选一种代码,复制到所用主题 functions.php 底部保存生效 方法一 ...

WordPress自定义函数以*星号隐藏手机号中间四位

WordPress自定义函数以*星号隐藏手机号中间四位

手机号作为敏感的个人隐私信息,需要先做处理再对外显示。当 WordPress 某些地方的用户名是手机号,可使用下方的自定义函数,对用户名中的手机号做*星号替换隐藏。 自定义函数 //手机号账号中间字符串以*隐藏 //教程 ...

暂无评论