【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

所以很多时候,设计师只能过来找到前端工程师:“帮我看下这个图片是多大的?”,显然这并不符合设计师高冷的性格气质。

那么,下面就让小鸡君来教你如何自己查看图片尺寸。

如何查看页面图片尺寸

先明确一下这里所说的尺寸,是指图片以像素单位计的宽高。这里之所以没用“大小”,是因为大小也可能指图片文件本身所占的字节数。

其实细心的同学可能已经发现了,在第 010 期(回复 010 或 10)浏览器开发工具的第一张截图上,就是选中了一张图片,在图片的下方已经展示了改图片的尺寸:

下面再说一下具体方法,首先确保你使用的谷歌 Chrome 浏览器或 Mac Safari 浏览器:

1,可以在图片上使用右键“审查元素”查看;

2,可以把鼠标指针放在图片上,然后按 Ctrl+Shift+C 选中查看;

3,可以按 F12 ,再点开发工具左下角的小放大镜,就跟 1 的效果相同了。

是不是又很简单呢?不过只讲这一点未免太水了吧?!

是的,那么下面再教大家一个简单的识别图像背景是纯色还是透明的办法。

网页上的图片,有的是有背景色,有的是背景色跟外部颜色一样(比如白色)看不出来,也有的是透明的,直接透到了后面的背景色上。

当然,这个技巧也是 for 设计师哒,可以知道切图仔有木有偷懒直接截图,而没有分离透明图层。

那么,这个技巧就是,仍然是,拖动!

以百度首页为例,将百度的 LOGO 向右下方拖到带有颜色的按钮上方:

注意红圈内的部分,会有类似白色蒙层的感觉。这说明这张图片是带有白色背景的,会使用 PS 的同学可以把图片直接复制粘贴到 PS 里确认,不会的请看切图大法系列教程:

而如果是透明的图片是什么样的表现呢?请看这个例子:

我将这个电饭煲的图片向左上方拖动到黑色背景的上方,你会发现它的周围并没有类似蒙层的存在。

这说明这个图片就是透明背景的,当它的外部或者底层的元素改变背景色时,它的背景色也会跟着改变。

我们可以加个背景色看一下:

熟悉样式的设计师也可以直接加个背景色来判断是否是透明图片。不熟悉样式的请回复 003 或 3,学习所谓样式。

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

前端css常用的选择小汇

13220
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

23750
来自专栏marsggbo

这是对position讲解最通俗易懂的版本了。

position 为了制作更多复杂的布局,我们需要讨论下 position 属性。它有一大堆的值,名字还都特抽象,别提有多难记了。让我们先一个个的过一遍,不过你...

26860
来自专栏杨龙飞前端

前端命名规范化

16960
来自专栏前端知识分享

第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签。搬了房子,收拾了一下东西,太累了,所以没有学很多。明天还上班,今天就先到这。

11510
来自专栏袁佳平的专栏

周杰伦读心术背后的技术实现

前言   在技术细节的内容开始之前,您可以先通过下方的二维码再次体验这个魔术。 image.png image.png 一、HTML 1.设置meta <m...

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

网页布局类型

1.定宽布局 2.响应式布局 流式布局(就像水一样,其实就是按照百分比布局 https://m.jd.com/ http://m.sohu.com/) ...

19930
来自专栏编程坑太多

如何开发适配安卓和iOS双平台的React Native应用

13520
来自专栏地方网络工作室的专栏

CSS3 做一个有闪光效果的进度条

CSS3 做一个有闪光效果的进度条 今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。 最终效果:CSS3...

27780
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

20420

扫码关注云+社区

领取腾讯云代金券