天天瞎忙活,QQ:705719110,欢迎来撩!

CSS 雪碧图应用

CSS学习 随风 262℃ 0评论

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

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

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

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

转载请注明:怼码人生 » CSS 雪碧图应用

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址