CSS 雪碧图应用

/ 0评 / 0赞

全景图web播放器样式要改，只拿到了一个雪碧图(前端一般，之前根本没用过雪碧图好吗o(╯□╰)o)，一搜其实也挺简单的，这里简单介绍一下，先来看我们的图

其实要想实现这种CSS抠图，只需要用到一个属性：background-position。但是使用之前可以先来理解一下下面的东西，div可以理解成一个矩形框，它的左上角是顶点，背景图片的顶点也是左上角，div加载背景图时，会把两个顶点重合，顶点的坐标是(0,0)。

设置一下div的宽、高，让它和小图的宽、高一样就可以了！再来看看background-position属性，它有两个参数，分别是水平方向移动的像素、竖直方向移动的像素，都用负数表示。大图不动，div移动，也只能是向右、向下移动，只要记住这两个方向移动的像素都用负数表示就行了！
因此，只要找到小图相对于大图左上角顶点的水平移动像素、竖直移动像素就可以了。小菜也不用什么专业工具，用截图就很方便，从大图左上角顶点开始截，到小图顶点那停下来，一看像素就差不多了，然后再调试调试，基本就搞定，来看一下我的实现



.modellist div{
	right: 1rem;
	display: inline-block;
	background: url(../images/ico-1.png) 48px 48px no-repeat;
	width: 48px;
	height: 48px;
	top:50%;
	margin-top: -16px;
	vertical-align: -1.5rem;
	margin: 0 0.3rem 0 1rem; 
	transform: scale(0.5);
}
.morelist li:nth-child(1) div {
    background-position: 0 -192px;
}

这样就实现了，很简单，来看效果

评论已关闭。