[Html/CSS] 利用CSS禁止复制网页内容

发表评论
8 °

A+

摘要

smppm4na01g.jpg 下载附件 2023-1-4 15:46 上传faq0ukiw21o.png 下载附件 2023-1-4 15:49 上传

在CSS中，可以利用“user-select”属性实现不能复制页面内容效果，该属性用于规定是否能够选取元素的内容，当属性的值为“none”时，元素的内容就不会被选取，进而不会被复制，语法为“元素{user-select:none;}”。
[Html/CSS] 利用CSS禁止复制网页内容

在css中，想要实现不能复制页面内容效果，可以利用user-select属性。

user-select属性规定是否能选取元素的文本。在 web 浏览器中，如果您在文本上双击，文本会被选取或高亮显示。此属性用于阻止这种行为。

语法如下：

user-select: auto|none|text|all;

其中属性值代表的含义如下：

其中需要注意的是：

-moz-user-select:none; /* Firefox私有属性 */   -webkit-user-select:none; /* WebKit内核私有属性 */   -ms-user-select:none; /* IE私有属性(IE10及以后) */   -khtml-user-select:none; /* KHTML内核私有属性 */   -o-user-select:none; /* Opera私有属性 */   user-select:none; /* CSS3属性 */

示例如下：

<html> <head> <style>  body{   -webkit-user-select: none; /* Safari */   -ms-user-select: none; /* IE 10 and IE 11 */   user-select: none; /* Standard syntax */ } </style> </head> <body> <h1>user-select 属性</h1> <div>给页面body元素添加user-select属性，就可以让页面内容禁止复制了。</div> </body> </html>

输出结果：