我们学习CSS背景的应用——CSS精灵图。
什么是精灵？ 我们先看一个案例——在这个页面上，使用了各种小图片。
如何将那些小图片插入到页面中？ 你的思维惯性必须通过使用img或background-image来实现。 想想看，如果页面上只有几张简单的图片素材，我们可以使用img元素来导入图片，但是当网站上的图片太多时，一张一张地导入图片就变得不方便了。
最重要的是，每张图片的显示都是由浏览器通过互联网发送的。 服务器收到请求后，通过互联网返回请求的内容。 如果页面上有数百张图片，甚至是小图标，则需要执行一次此过程。 不用说，由于对网络资源的过度请求，整体页面加载速度会变慢。
此时html图片横向排列，我们就可以利用精灵贴图技术来解决这个问题了！
精灵图像，也称为精灵图像、怪物图像，其基本原理是将页面中使用的各种图像进行分类，并将其放置在具有透明背景的图片中。 图片的引入是通过CSS后台技术实现的，从而减少服务器发送和接收请求的次数，提高页面加载率。
例如，页面上有一个元素，使用background-image插入精灵图像。
默认背景图像左上角的字母“a”显示在元素内部。 如果要在元素中显示字母O，则必须使用background-position属性来调整背景图片的位置。
在ps软件中打开精灵图（ps.gaoding.com），使用圆选工具从图片左上角检测字母“O”的左上角，并测量距离：水平390px，垂直105 像素。
因为背景图片需要整体连接到左上角，所以background-position的值在两个方向上都是正值：分别为-390px和-105px。 此时，字母 o 已经显示在元素内部。
如果位置检测出现错误，可以在浏览器的开发者工具中找到页面元素，选择属性值，按按钮的上下箭头，微调属性值。 位置调整满意后，根据该值改变样式。
你可能会问，精灵图是前端工程师做的吗？ 其实在团队的网站开发中，UI设计师都会给我们准备好网页所需要的各种图片，我们可以直接使用。
接下来我们将利用灵图技术来完成“千峰”拼音声母的显示。
创建014-sprites文件夹，在文件夹下创建sprites.html文件和sprites-style.css文件，打开html，构建基础代码html图片横向排列，导入外部样式。
使用emmet命令：div.box$*2快速创建两个带有类名的div元素。
HTML
打开css文件，定义div元素选择器，并声明样式：宽度：50px，高度：70px，边框：2px纯灰色。
先看看效果，两个竖排的白边容器就准备好了！
继续给div添加样式：float: left, margin: 10px。
此时容器已经垂直显示，并且容器之间也存在宽度。
CSS
div{
width:50px;
height:70px;
border: 2px solid gray;
float:left;
margin:10px;
}
定义另一个 .box1 选择器并声明样式：background: url(sprites.png) no-repeat。
预览效果，字母“a”已经显示在第一个容器中。
使用ps中的圆选择工具，测量图片左上角到字母“q”左上角的水平距离为545px，垂直距离为110px。
将样式值附加到背景属性：-545px -110px。
这样，字母“q”就显示出来了！ 如果您对这个位置不满意，可以在这里进行微调。
CSS
.box1{
background:url(sprites.png) no-repeat -545px -105px;
}
重复以上操作。 检测ps中字母f的位置，水平方向390px，垂直方向20px。
定义另一个 .box2 选择器并声明样式：background: url(sprites.png) no-repeat -390px -20px;
再看疗效，也显示了字母“f”。 您还可以微调位置。
CSS
.box2{
background:url(sprites.png) no-repeat -386px -14px;
}
写下你自己的名字。 大家来吧！
文章附带视频链接：
发表评论