通过CSS禁止别人复制网站上的图片

文章2021-07-0651 人已阅来源:TONJAY

禁止复制网站上的图片,这个是老生常谈的问题了。自己辛苦做的,被别人随随便便的一个复制就拿走,当然心有不甘了。

但互联网上,还没有拿不走的图片——只要能看到;我们所做的只不过增加其复制的复杂繁琐程度罢了

常用的方法一般使用是js,效果很好。详情可以看js 禁止右击保存图片,禁止拖拽图片

但这个也不行了,为啥?chrome浏览器可以轻易的设置禁用js,js一禁用,那不就跟不穿衣服似的站在别人面前任人摆布了。

其实通过css层级属性z-index,也可以达到防止复制图片的作用,代码如下:

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通过CSS禁止别人复制网站上的图片</title>
</head>
<body>
  <style>
    .content{
      border: 2px solid;
      position: relative; /*主要*/
      margin: 40px 20%;
      text-align: center;
    }
    img{
      z-index: -1; /*主要*/
      position: relative; /*主要*/
    }
  </style>
  <div class="content">
    <p><img src="https://www.baidu.com/img/flexible/logo/pc/result.png"></p>
  </div>
</body>
</html>

js禁用一般防防新手还行,略微懂点了就不行了;

z-index更强一步,不过略微懂点代码的也防不住;(也可以一次性破防,这里就不再给大家说了)

js及css可以一起使用,效果更好一点,当然也有更变态的,往下看。

写在最后

当然我还见过比较变态sb的,一个技术类网站,不让复制,禁用js后页面不让浏览,解决方案代码不能复制,丝毫没有考虑到用户体验,更何况其中内容也多为转载...简直就是反人类。

这种情况下,有两种方案可尝试:

  1. 查看源代码。若网站禁用右键,可先在一个其它的未禁用网站查看源代码,再手动输入该页面地址即可。
  2. 文字类型的,直接QQ截图识别文字

最后一句,禁用选择复制务必要考虑到用户体验,没有用户体验一切都是扯蛋。大型网站有哪个禁止复制的?

延伸阅读:css3禁止选中文本