作为设计师,平时经常逛花瓣、behance、dribbble等网站,看到心仪的图片经常会去保存下来,然后加入到自己的个人图库中。大多数时候,我们用浏览器右键另存为,即可把图片保存下来,简单、高效。
比如站酷首页作品列表:
但是总会遇到那么一些网站,设置了权限,右键无法下载,那么该怎么办呢?
看完本文你将解决以下问题
解决网页限制图片下载
从代码中找到图片并下载
一:网页设置权限,无法下载
比如站酷某插画大神的作品,当你满怀期待地右键时,会提示这位大神对作品设置了隐私保护,禁止保存到本地……
解决方法:
1:右键页面空白处
2:选择检查
3:在弹出的界面中,左上角选择箭头
4:用鼠标选中需要保存的图片单击,会看到下方图片的网络地址
5:双击复制网络地址,新建浏览器标签粘贴即可。
关键点就是要找到对应图片的网络地址,然后就可以下载了。
二:图片上层有链接遮挡
这种情况下没有右键另存为的选项,比如站酷首页大banner下的广告图。
原因是图片上方有个透明的链接区域,右键点击的正是这个链接,所以无法下载。
解决方法:
1:右键单击图片
2:在弹出的界面中找到蓝色行的下方代码,即为图片网络地址
3:双击复制网络地址,新建浏览器标签粘贴即可。
三:图片用css背景制作
这种情况下,我们用以上方法都不管用,右键后在代码区无法找到图片。那这个时候该如何存图呢?
在这里先科普下网页中的图片展示方法。
一般网页的图片展示分为img标签展示和background-image两种。
我们之前右键另存为的图片使用img标签的图片。右键无法保存的图片,基本上都使用了background-image。这个家伙是存在于css中的,我们要从css中把图片弄出来。
解决方法:
1:右键单击图片
2:在弹出的界面右侧会看到对应图片的css样式
3:选中background-image后面的蓝色链接
4:右键 Open in new tab
关于css的介绍,这里就不多说了,高级UI必备技能,网上教程也很多。一般建议UI设计师最好懂一些html+css基础知识,几个星期的学习就可以解决很多UI实际问题。这对你的设计有巨大的帮助,对UI的理解也会更为深入。
UI黑客将在以后的文章中为大家带来专为设计师打造的html+css教程,敬请期待。
总结
以上就是我们在实际工作学习中经常遇到的图片保存问题。其实我们本质上做的工作就是找到图片的网络地址,然后再用浏览器打开。
希望这几个方法能解决大家之前遇到的一些问题。
更多UI设计干货文章请关注UI黑客
微信公众号 uihacker
UI黑客官网http://www.uihacker.com/
UI黑客论坛http://bbs.uihacker.com/
网友评论