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

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

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

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

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

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

第一招:能否选中

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

假设文本上有链接(回复 002)的话,那么很有可能你会把整个链接拖出来:

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

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

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

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

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

-webkit-user-select: none;

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

那么如果是图片的话,点上去拖动会是什么效果呢?请看图:

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

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

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

第二招:鼠标形状

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

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

第三招:鼠标右键

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

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

第四招:开发工具

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

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

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

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

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

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

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

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

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

原文发布于微信公众号 - 姬小光(hi-laser)

原文发表时间:2015-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

30040
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

1.1K60
来自专栏练小习的专栏

ios下滚动条默认显示

研究这个问题的背景: 众所周知,ios下垂直和水平滚动条都是默认不出现,用户滑动时,才显示,滑动结束以后,又隐藏滚动条。 横向滚动条默认隐藏,用户很可能会忽略右...

62960
来自专栏机器学习从入门到成神

image的srcset属性

介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,imag...

20010
来自专栏DeveWork

删除 WordPress 导航菜单的多余 CSS 选择器(id或class)

在默认情况下,WordPress 的导航菜单会输出很多如menu-item、menu-item-type-taxonomy、menu-item-object-c...

20080
来自专栏河湾欢儿的专栏

1.CSS Reset

浏览器对标签进行了默认设置,所以在我们没有定义样式的时候,会有五花八门的效果 不同的浏览器设置的默认样式是由差异,效果也会有差异。 因为浏览器对标签进行设置...

12620
来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

40440
来自专栏一“技”之长

AppleWatch开发入门二——界面布局 原

        在iphone开发中,最基本的布局方式是通过frame,将控件的位置和大小固定在屏幕上,后来,由于手机屏幕的尺寸有了略微变化,有了autores...

10420
来自专栏程序员的知识天地

移动web端常见bug

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。

13030
来自专栏www.96php.cn

[ecshop教程]怎样给ecshop商品图片添加水印

在ecshop商店设置——显示设置 1、选择水印图片 2、选择水印在图片中的位置 3、设置水印透明度。0为完全透明,100为完全不透明 ? 在商品管理...

38050

扫码关注云+社区

领取腾讯云代金券