CSS精灵

马黑黑 · 发表于 2022-7-1 20:24

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-7-1 20:33 编辑

CSS精灵又称CSS精灵图，因为CSS精灵就是用来处理图片的，也有人称之为CSS雪碧，大约与英文单词 sprite 的差不多先生的“音译”有关。我们就称CSS精灵或CSS精灵图，毕竟这两个词组狗狗能输入。

CSS精灵的存在源于web引导性小按钮、导航菜单，它们会使用大量的小图做背景，小图片多了不好管理，每一张图片的单独引用都会引发一次http请求很是消耗资源，那么，干脆将它们集合到一张大图，然后通过CSS切割合适尺寸的单位作为背景图片加载到导航菜单和按钮上。一句话，CSS精灵图就是大图变小图，我变我变我变变变的精灵图。

比方说，有一张 400*400 名为 mypic.png 的图片，上面通过精心设计，就有 4*4 = 16 个菜单或按钮背景图，假设按钮A，选择器名称为 #btnA，需要取其上的第一张图标，则：

#btnA { width: 100px; height: 100px; background: url('mypic.png') 0px 0px; }

技术核心在红色部分。url 指明图片名称，0px 0px 表示从图片的左上角 {xy} 坐标值开始定位图片并导入，导入的宽高尺寸则由 btnA 自身的宽高决定，都是100个像素。

那么，按钮 #btnB 要取大图上的第一排的第二个部分，怎么处理？看代码帮助理解：

#btnB { width: 100px; height: 100px; background: url('mypic.png') -100px 0px; }

-100px 0px 表示：大图的定位，水平方向左移100个像素，垂直方向不动；所取尺寸仍然由按钮自身的宽高决定。

按钮 #btnD，要取第二排的第一个按钮呢？看代码：

#btnD { width: 100px; height: 100px; background: url('mypic.png') 0px -100px; }

这里，大图第二排的第一个图片在最左边，所以图片的定位偏移为 0px，第二排距离图片上方边缘 100px，所以上移 100 个像素。

其他依此类推。

二楼将给出一个实例，它将背景图用十字切割法，一切为四，每一个区块我们引入3d动画，鼠标经过时会看到效果，该动画效果主要用于帮助理解图片通过CSS精灵处理后的表现。例子所有图片为 660*338

马黑黑 · 发表于 2022-7-1 20:25

本帖最后由马黑黑于 2022-7-1 20:26 编辑

马黑黑 · 发表于 2022-7-1 20:27

二楼效果，需要鼠标滑过才能看到图片被CSS精灵加工的效果。以下是代码：

<style>
.papa {
margin: 0 auto;
margin-top: 60px;
width: 660px;
height: 338px;
background: tan ;/*url('pic/xcrm1.jpg') no-repeat center/cover;*/
perspective: 1000px;
box-shadow: 4px 4px 28px rgba(0,0,0,.85);
position: relative;
}
.papa>span {
width: 50%;
height: 50%;
transition: all 1s linear;
transform-style: preserve-3d;
position: absolute;
}
.papa>span:hover {
transform: rotateZ(15deg) rotateY(60deg);
box-shadow: 2px 2px 40px rgba(0,0,0,.95);
cursor: pointer;
}
.papa>span:nth-child(1) {
left: 0;
top: 0;
background: url('/data/attachment/forum/202206/24/200554upvwl1h3u3gpjpwv.jpg') 0px 0px;
}
.papa>span:nth-child(2) {
left: 50%;
top: 0;
background: url('/data/attachment/forum/202206/24/200554upvwl1h3u3gpjpwv.jpg') -330px 0px;
}
.papa>span:nth-child(3) {
left: 0;
top: 50%;
background: url('/data/attachment/forum/202206/24/200554upvwl1h3u3gpjpwv.jpg') 0px -169px;
}
.papa>span:nth-child(4) {
left: 50%;
top: 50%;
background: url('/data/attachment/forum/202206/24/200554upvwl1h3u3gpjpwv.jpg') -330px -169px;
}
</style>
<div class="papa">
<span></span>
<span></span>
<span></span>
<span></span>
</div>