美文网首页UI设计中的技术、工具与效率
网页图片的下载及保存方法汇总

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

作者: UI黑客 | 来源:发表于2018-11-22 16:18 被阅读4次

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


    相关文章

      网友评论

        本文标题:网页图片的下载及保存方法汇总

        本文链接:https://www.haomeiwen.com/subject/towlqqtx.html