1. 犀牛前端部落首页
  2. CSS百科

css实现禁止内容被复制

自己网站辛辛苦苦的原创内容,不想被人复制,可以使用CSS来实现。

本文目的:了解如何使用CSS属性user-select禁用文本选择。

css实现禁止内容被复制

默认情况下,浏览器允许我们使用键盘在浏览器中选择文本,例如按下Mac上的cmd-A组合键,或者使用鼠标。

如何禁用它,让你的网页不能被人复制呢?

使用user-select: none;可以实现。

需要使用不同的浏览器前缀:

-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

如果你想在部分区域可选择,你可以在body元素上应用user-select:none;,在可以选择的区域添加:

user-select: text;

实际上,这种技术只能让不懂HTML的人无法选择,但是无法屏蔽了解该属性的用户。

与这类似的,可以禁止IOS用户保存图片,解决IOS长按img无法保存问题

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3303.html

发表评论

登录后才能评论