css精灵图如何取图

css精灵技术：将网页中的一些背景图像整合到一张大图中，减少请求服务器的次数。
精灵图的使用：

假如我想取这张图片的 q 出来，应该怎么办呢？
步骤一：打开firewords，将图片导入。

步骤二：点击右上角，如下图，将图片锁住，这样图片位置才不怕被移动。

步骤三：如下图

步骤四：观察左下方这些数值。前期工作做好啦

接下来，搞代码：

<!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>.q {/* 宽高和我们切片的宽高一样 */width: 81px;height: 59px;/* 背景图片就是整个大的精灵图，我们要的图片只要那张，所以no-repeat，网页，向右为正方向，向下为正方向，因此我们 *//* 像左定位和向上定位为负数。一般精灵图上去图片的坐标都是负数 */background: url(images/word1.jpg) no-repeat -253px -184px;/* 因为span为行内元素，不能设置宽高的，因此我们要把他转为行内快元素才行 */display: inline-block;}</style>
</head>
<body><span class="q"></span>
</body>
</html>

运行结果如下：

同理，可以取出其他的小图片出来，就类似于切片技术。下次如果你们要将网页上的某张小图片搞出来，也可以采用这种方法哟~

css精灵图如何取图相关推荐

【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
CSS 精灵（雪碧图、精灵图）
学习目标能够说出什么是CSS精灵掌握CSS精灵在实际示案例中的应用概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图 ...
CSS 精灵（雪碧图、精灵图）、滑动门
概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图定位":其实就是把网页中一些背景图片整合到一张图片文件中,再 ...
二、CSS 精灵（雪碧图、精灵图）
- 能够说出什么是CSS精灵 - 掌握CSS精灵在实际示案例中的应用 ### 概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS ...
Web前端知识CSS（清浮动的方法、CSS精灵图、滑动门）
一.清浮动的方法清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点:不够灵活,适用于高度固定的布局中 2.为浮动元素的父级盒子设置浮动优缺点:会产生新的浮动问题 3.为浮动元素的父盒 ...
浮动和css精灵基础知识
一.清浮动的方法清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点:不够灵活,适用于高度固定的布局中 2.为浮动元素的父级盒子设置浮动优缺点:会产生新的浮动问题 3.为浮动元素的父盒 ...
html中精灵图的使用方法,关于CSS Sprites、CSS精灵的详细解析
原标题:关于CSS Sprites.CSS精灵的详细解析 CSS Sprites简介 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪碧的意思.在国内习惯成他 ...
html精灵图资源,知识分享：HTML5+CSS3基础之CSS Sprites（CSS精灵）
原标题:知识分享:HTML5+CSS3基础之CSS Sprites(CSS精灵) CSS Sprites介绍 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪 ...
day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标
文章目录 day07 项目切图规范 PS常用工具常见的图片格式和特点 CSS精灵 CSS小箭头 BFC (Block Formatting Context) 块级格式化上下文阿里矢量图标 day0 ...
html中sprite标签,网页切图 CSS Sprites（CSS精灵）介绍和图文使用教程
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵.CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大 ...

css精灵图如何取图

css精灵图如何取图相关推荐

最新文章

热门文章