网页图片的下载及保存方法汇总

作为设计师，平时经常逛花瓣、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/

---