雪碧图 .btn:link{ background-image:url("img图片/888.png"); width:50px; height:50px; display:block; background-repeat:no-repeat; background-position:-8px -320px; } .btn:hover{ background-position:-55px -325px; }
雪碧图 *{ padding: 0; margin: 0; } .xuebitu:link{ display: block; width: 42px; height: 30px; background-image: url(image/xuebi.png); background-position: -10px -340px; } .xuebitu:hover{ background-position: -58px -338px; } ...
千库网为设计者提供导航雪碧图素材大全,为您省却导航雪碧图图片素材搜索时间,这里有海量导航雪碧图素材图片供您下载使用,本次搜索千库网为您找到51张素材
一、雪碧图 1.1概念 CSS Sprite也叫CSS精灵、CSS雪碧图,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求,所以图片越多请求越多,造成延迟的可能性越大。所以页面有...
background-image:url(引入图片的路径);可以引入多张图,用逗号隔开即可。 background-position:x y;x和y是x轴上的偏移值,y是y轴上的偏移值 与此同时还可以配合background-repeat和background-size进行精确把控。 二、如何做精灵图? 如果是一个按钮的状态,其实也就是三个状态,normal、hover、press,那么我们其实...
雪碧图是什么? 雪碧图,英文原名叫CSSsprites。 sprite 指的是精灵。 我们喝的雪碧,它的英文也是 sprite,应该直译为 “精灵” 的。但要符合中国市场,因为你不能说我喝的饮料叫“精灵”,那特别怪。于是就走音译的路线,翻译成 “雪碧” 了。 所以雪碧图更正确的叫法应该是 “精灵图”。
取消选择后,选中图标,再向下向右各移动1px,留出边距 8 合成完的雪碧图就可以交付给开发人员了,(上图是参考线效果),实际导出的一般是透明背景的PNG格式 9 当需要补充新图标时,可在原图的基础上画布向右向下扩展,不要改变已完成部分的left值和top值,这样则不会对原有图标造成影响 ...
新图网是专注免费商用设计素材下载的网站,提供雪碧图,雪碧图图片,雪碧图素材, 雪碧图图标,雪碧图海报等免费下载服务!
1. 什么是雪碧图 雪碧图乍一听可能不知所然,因为雪碧是一种汽水,和图片又有什么关系呢?那我们就来讲一讲它到底是个什么?它其实就是把很多小图片集合在一起放到了一张大图片里面,就像下面这样:可以看到通常都是一些图标类的图片,这是因为图标一般比较符合“小”图片的定义: 然后用到哪个图的时候就用背景图定...
雪碧图(Sprite)是一种将多个小图标或图像合并到一个单独的图像文件中的技术。在Web前端开发中,雪碧图被广泛使用来优化网页加载速度和减少HTTP请求数量。 通常情况下,一个网页可能需要加载多个小图标或背景图像,每个图像都需要发送一个HTTP请求,这将导致网页加载时间变长。而使用雪碧图技术,则可以将多个图像合并到一个...