网页图片的下载及保存方法汇总-UI黑客

作为设计师,平时经常逛花瓣、behance、dribbble等网站,看到心仪的图片经常会去保存下来,然后加入到自己的个人图库中。大多数时候,我们用浏览器右键另存为,即可把图片保存下来,简单、高效。

比如站酷首页作品列表:

网页图片的下载及保存方法汇总-UI黑客

但是总会遇到那么一些网站,设置了权限,右键无法下载,那么该怎么办呢?

看完本文你将解决以下问题

  • 解决网页限制图片下载
  • 从代码中找到图片并下载

一:网页设置权限,无法下载

比如站酷某插画大神的作品,当你满怀期待地右键时,会提示这位大神对作品设置了隐私保护,禁止保存到本地……

网页图片的下载及保存方法汇总-UI黑客

解决方法:

1:右键页面空白处

2:选择检查

3:在弹出的界面中,左上角选择箭头

4:用鼠标选中需要保存的图片单击,会看到下方图片的网络地址

5:双击复制网络地址,新建浏览器标签粘贴即可。

网页图片的下载及保存方法汇总-UI黑客

关键点就是要找到对应图片的网络地址,然后就可以下载了。

二:图片上层有链接遮挡

这种情况下没有右键另存为的选项,比如站酷首页大banner下的广告图。

网页图片的下载及保存方法汇总-UI黑客

原因是图片上方有个透明的链接区域,右键点击的正是这个链接,所以无法下载。

解决方法:

1:右键单击图片

2:在弹出的界面中找到蓝色行的下方代码,即为图片网络地址

3:双击复制网络地址,新建浏览器标签粘贴即可。

网页图片的下载及保存方法汇总-UI黑客

三:图片用css背景制作

这种情况下,我们用以上方法都不管用,右键后在代码区无法找到图片。那这个时候该如何存图呢?

在这里先科普下网页中的图片展示方法。

一般网页的图片展示分为img标签展示和background-image两种。

我们之前右键另存为的图片使用img标签的图片。右键无法保存的图片,基本上都使用了background-image。这个家伙是存在于css中的,我们要从css中把图片弄出来。

解决方法:

1:右键单击图片

2:在弹出的界面右侧会看到对应图片的css样式

3:选中background-image后面的蓝色链接

4:右键 Open in new tab

网页图片的下载及保存方法汇总-UI黑客

关于css的介绍,这里就不多说了,高级UI必备技能,网上教程也很多。一般建议UI设计师最好懂一些html+css基础知识,几个星期的学习就可以解决很多UI实际问题。这对你的设计有巨大的帮助,对UI的理解也会更为深入。

UI黑客将在以后的文章中为大家带来专为设计师打造的html+css教程,敬请期待。

总结

以上就是我们在实际工作学习中经常遇到的图片保存问题。其实我们本质上做的工作就是找到图片的网络地址,然后再用浏览器打开。

希望这几个方法能解决大家之前遇到的一些问题。