通过CSS禁止别人复制网站上的图片
禁止复制网站上的图片,这个是老生常谈的问题了。自己辛苦做的,被别人随随便便的一个复制就拿走,当然心有不甘了。
但互联网上,还没有拿不走的图片——只要能看到;我们所做的只不过增加其复制的复杂繁琐程度罢了。
常用的方法一般使用是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截图识别文字
最后一句,禁用选择复制务必要考虑到用户体验,没有用户体验一切都是扯蛋。大型网站有哪个禁止复制的?
延伸阅读:css3禁止选中文本