通过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后页面不让浏览，解决方案代码不能复制，丝毫没有考虑到用户体验，更何况其中内容也多为转载...简直就是反人类。

这种情况下，有两种方案可尝试：

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

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

AIHX

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

写在最后

相关内容