CSS精灵
本帖最后由 马黑黑 于 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:26 编辑 <br /><br /><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>
二楼效果，需要鼠标滑过才能看到图片被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>
这个就是对图片进行切割么？ 黑黑老师又出新产品了，看着技术含量就很高{:4_181:} 这个太好了。反正俺问个外行话：要是被美丽国制裁了，你这CSS能显示么？ “-100px 0px 表示：大图的定位，水平方向左移100个像素”
这个不懂，包括垂直方向的上移。是从哪开始移的？ 黑黑又带来新知识，辛苦了{:4_187:} 这个确实是新知识，小辣椒一点不懂的 小辣椒 发表于 2022-7-1 21:38
这个确实是新知识，小辣椒一点不懂的
你用过的 黑黑这个background: tan ;/*url('pic/xcrm1.jpg')
是为上传的空间设置？ 小辣椒 发表于 2022-7-1 21:39
黑黑这个background: tan ;/*url('pic/xcrm1.jpg')
是为上传的空间设置？
不是呀。我再本地做好，发论坛，才发现，图片是我本地的，所以改了改 红影 发表于 2022-7-1 21:09
这个就是对图片进行切割么？
实际上也不是切割，对原图没有任何伤害。但达到切割的目的。
原理应该能看得出来：取图片指定位置、尺寸做背景图 马黑黑 发表于 2022-7-1 21:41
不是呀。我再本地做好，发论坛，才发现，图片是我本地的，所以改了改
哦，我自己电脑预览了，看见效果了 马黑黑 发表于 2022-7-1 21:38
你用过的
我没有做过这种图图啊 小辣椒 发表于 2022-7-1 21:50
我没有做过这种图图啊
做播放器按钮的时候你用过，或者跟我说过，还给过一张 2*2 的图片 小辣椒 发表于 2022-7-1 21:49
哦，我自己电脑预览了，看见效果了
感觉如何 马黑黑 发表于 2022-7-1 21:53
感觉如何
效果很明显啊，鼠标点击就出来了 小辣椒 发表于 2022-7-1 21:55
效果很明显啊，鼠标点击就出来了
这个示例根本不用点击，滑过即可 马黑黑 发表于 2022-7-1 21:53
做播放器按钮的时候你用过，或者跟我说过，还给过一张 2*2 的图片
小辣椒，学了后面忘记前面的{:4_203:}