用谷歌浏览器检查功能实现精灵图

精灵图也称雪碧图，前端开发时设计师可能会把用到的很多小图放在一起，组成一张图，开发人员在使用的时候自己去取想要的内容。

（图源网络，侵删）

这张图中有很多小图片，比如我想取第二行第三个图片，分为四步

首先，设置图片为背景图，用一个盒子将图片框起来，最好设置一下边框，将图片位置显示的更清楚

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 600px;height: 600px;border: 2px solid black;background: url("imgs/精灵图.jpg") no-repeat;}</style>
</head>
<body><div></div>
</body>
</html>

其次，将想要的部分放在页面右上角，这一步要用到谷歌浏览器的调试功能，修改background-position属性值，找到合适的位置。

此处，需要注意的是，背景图中的属性值可以利用速写属性background统一书写，书写顺序除了background-position与background-size外没有特别要求。因为background-position与background-size都有数值表示方法，写在一起分辨不出，所以规定为先写background-position属性值，然后加“/”，再写background-size属性值。此处精灵图中并未用到图片尺寸。

之后，就是改变盒子的尺寸，先用谷歌浏览器的调试功能调整到只有想要的部分即可

最后，把前两步测试出的数值改到代码中，并去掉边框，图片就只有想要的那一部分了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 136px;height: 107px;background: url("imgs/精灵图.jpg") no-repeat -337px -196px;}</style>
</head>
<body><div></div>
</body>
</html>

如果想要移动图片的位置，移动盒子的位置即可，比如，改变margin值

用谷歌浏览器检查功能实现精灵图相关推荐

谷歌浏览器检查功能_谷歌Chrome浏览器添加新功能，爱”吃“内存有应对之策？...
谷歌Chrome浏览器是Windows上占用资源最多的应用程序之一,如果安装扩展程序或打开过多的选项卡,其将占用更多的内存.据悉,目前Google Chrome Canary内部版本对一项新功能进行了 ...
谷歌浏览器同步功能无法加载_谷歌浏览器Chrome 86正式发布，全新重磅功能上线——密码检查...
今年7月底,Chrome浏览器推出了一个新的安全检查工具. 这个工具能够扫描和清理用户计算机上的垃圾软件和其他威胁,还能帮助用户检查自己的密码是否被泄露. 不过,这项新工具此前仅在Chrome Can ...
html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩 1.如何设置标签的背景色彩? 在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的取值: 具体单词 rgb rgba 106进制快捷键: bc ...
Docker 健康检查功能
Docker1.12及以上版本,自带了健康检查功能.通常情况下只能使用docker ps 来查看容器是否是up的状态,但是服务是否正常我们不可知,而健康检查功能,可以允许我们在容器中执行一些健康检查的 ...
列表根据下标取值_散列表（上）：Word文档中的单词拼写检查功能是如何实现的？...
Word这种文本编辑器你平时应该经常用吧,那你有没有留意过它的拼写检查功能呢?一旦我们在Word里输入一个错误的英文单词,它就会用标红的方式提示"拼写错误".Word的这个单词拼写 ...
html精灵图坐标如何确定,如何使用HTML中的精灵图
在我们进行网页布局的时候经常会遇到以下的情况一排或多排文字上/下/左/右会有对应的小图标或图片,比如下图, 1.png 如果一张图片一张图片的去引入,不仅费时费力,还费资源. 那这个时候该如何去快速 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（精灵图，字体图标，技巧）
一.基础班学习路线三.CSS高级技巧 1.精灵图为什么需要精灵图sprites 精灵图使用(原理) 精灵图使用(代码) 精灵图案例-拼出自己名字 2.字体图标字体图标产生和优点字体图标下载字 ...
18 | 散列表（上）：Word文档中的单词拼写检查功能是如何实现的？
问题引入在 Word 里输入一个错误的英文单词,它就会用标红的方式提示"拼写错误",Word 文本编辑器的拼写检查功能是如何实现的呢?散列表(Hash Table) 散列表散列 ...
html背景图不显示_批量显示多张有序排列的图标，使用精灵图CSS Sprites这种办法...
让你显示一个天气图标你会怎么显示呢?让你做一个简单的动图你会怎么采用什么方式呢?让你输出一个长期固定的图标列表你会怎么编写代码呢? 如果不管性能,不用css,不用js,可能你会这么写html: < ...

用谷歌浏览器检查功能实现精灵图

用谷歌浏览器检查功能实现精灵图相关推荐

最新文章

热门文章