【第011期】如何区分页面上的图片和文字

在一个网页上，我们会看到有很多的图片，也有很多的文字。对于普通的用户，不需要去在意到底哪些是图片，哪些是文字。

而对于运营同学来说，文字部分如果是普通的文本，那么就有可能是可以直接修改的。

而如果文字在图片上，或者文字本身就是一张图片实现的，那么就需要找设计师同事来修改图片了。

所以这一期，我就教大家如何来识别页面上的图片和文字。

如何区分页面上的图片和文字

第一招：能否选中

对于普通的文本来说，即可以方便滴编辑修改的文案来说，拖动鼠标左键是可以选中文本的，如图：

假设文本上有链接（回复 002）的话，那么很有可能你会把整个链接拖出来：

这个特性其实是为了方便大家可以直接把某个链接拖到书签栏保存的，大家可以试一下。

对于带链接的内容，可以从周围空白，或者没有链接的地方按住鼠标左键拖过去，就可以选中了：

不过，如果页面上该链接旁边没有任何空间，全都布满了链接，就没办法了。

选中之后就可以复制粘贴这段文案了，很明显，这是一段“活字”，想修改的话可以找开发哥直接改掉。

另外还有一个特例，就是在 webkit 内核的浏览器里，对包含文本的元素应用样式：

-webkit-user-select: none;

就可以禁止用户主动选中，所以不是所有的“活字”都能用鼠标选中。

那么如果是图片的话，点上去拖动会是什么效果呢？请看图：

很明显，“相亲必备”这里是一块完整的图片被拖动了。当然，包含图片的元素也是可以被选中的：

不过，你可能注意到了，跟文字的选中还是有些差别的。文字的选中会反转文字颜色，比如本来是灰色文字，选中之后变成了白色。

而图片选中之后就不会全部反色，只是像蒙了一层滤镜效果。

第二招：鼠标形状

如果是普通文本（不带链接），一般鼠标指针会变成 I 字形状，大家可以随便把鼠标放在网上某一段文本处试试。

如果是带链接的文本或者图片，则鼠标指针会变成一个小手型，就无法区分了。

第三招：鼠标右键

如果你在图片上点击了鼠标右键，无论是否有链接，都会出现与图片相关的菜单：

而文本肯定不会有这些菜单。

第四招：开发工具

同上一期（回复 010）所讲，使用鼠标右键“审查元素”来看这块内容的真正结构了。

如果是普通文本就可以直接双击修改，如上期所讲：

我们还可以看到，这段文本外部包裹了一个 a 链接元素，说明点击这段文本会跳转到另一个页面（也可能是本页链接）。

而如果是图片的话，它的结果会是一个 img 元素：

我们看到，img 元素外面也包裹了一个链接，说明它也可以跳转。

====== 秘技分割线 ======

好了，有了上面四招，你已经基本可以区分页面上的是运营类图片还是纯文本了。

还有一些复杂的情况，是用 CSS 的背景图来实现的，可以能会对你造成困惑。

不过别担心，我们以后会详细讲解哒~