如何获得不能另存为的网络图片

相信大家在平时浏览网页的时候会碰到一些特别有好感的图片，又或者觉得这张图片很适合也作为展示素材的时候，就会把习惯性地点开鼠标右键，等待下面的菜单选项出现：

但是，有一些图片，鼠标右键一点，咦？怎么没有图片另存为？

图片截取自爱奇艺

这个时候大部分人都会知难而退，然后打开截图软件，截图，保存，完毕。

嗯~ 一切看似很顺利，但是如果有东西遮挡的时候呢？ 看一下厚朴主站的底部：

不仅有很多的字体，还有一些图片，按钮遮住了图片

这下子，截图也没办法╮（╯＿╰）╭了

这里，我们介绍一种方法，轻松获得上述这种难以获得图片。

img标签

这就要从一个img标签说起。

首先，平时我们所见到的可以另存为的图片是在html代码中以img标签形式出现的。

嗯？这是什么意思呢？

我们来看一下百度图片的网页的部分截图：

图片截取自百度图片

里面的图片都是由以下格式的html代码表示的：

其中第一幅图片的html代码是：

这里我们想到，我们可以通过标签里面的图片地址来获得相应的原图呀。嗯，没错，我们在地址栏输入上述图片地址（src），然后出现了这张图片的原图。

可是每次都要这样做岂不是很麻烦？其实浏览器已经帮我们做好了，就是图片另存为。

background-image属性

但是有一些不是上述格式的img的html代码也可以渲染成一张图片，它在html的表示跟其他标签一样，如厚朴主站底部图片的html代码：

为什么它没有图片地址却可以渲染成一张图片，图片是从哪里来的？

回答这个问题的关键就是CSS中的一个background-image属性。

从字面上的意思就是背景图片的意思，也就是说，这张图片在这里充当的是背景而不是主体。

CSS中通过以下语法定义background-image

也就是说我们通过找到CSS里background(-image)里的图片地址就可以找到原图了。

展示技术的时候到了

首先我们打开开发者工具，本人使用的是chrome浏览器，在浏览器内按鼠标右键—检查或者直接按F12

然后找到相应的html代码，当你找到某一个html标签的CSS属性里有图片地址，那就大功告成了。以下为厚朴主站底部图片的位置：

接下来的可以将图片放进地址栏（有时候直接在地址后面添加即可）进行访问

还可以通过浏览器自带的功能进行访问图片：

在url里面点击鼠标右键，出现菜单：

点进去之后就可以直接保存原图了。

当然你可以直接打开开发者工具，在Sources—Network里寻找目标图片（字体或者其他）

彩蛋

其实区分上述两种不同图片的方法很简单：就是按住图片，看一下能不能拖动图片，可以拖动图片的就是img标签类型，不能拖动或者拖动后只有一些文字链接的就是CSS属性定义的图片。

希望上述方法可以帮助你保存到你想要的图片。Good Luck！

END