理论:获取图像一次,然后移动它并且只显示它的一部分。这减少了必须获取多个图像的开销。
优点:跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点:
至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
<style> #sprites{ width: 51px; height: 59px; background-position: -2px -2px; background:url(images/sprites1.png)no-repeat; } .max1{ background: url(images/sprites1.png) no-repeat -330px -68px; width: 61px; height: 54px; transform:scale(0.5) /* 缩小图片大小,缩小一半 */ } </style> </head> <body> <div class="max" id="sprites"></div> <div class="max1"></div> </body>
1、首先我们需要一张合集的多图,比如我们一般网站上用到的,logo小图标等
2、在使用的时候需要给该图片设置宽与高
3、然后使用background-position属性的x,y来找到图片
4、设置图像大小可以用transform:scale( x )来控制图标大小
这个情况中找xy的坐标其实是一件很麻烦的事情,推荐一款工具,可以很好的找到坐标css精灵
本文来源:重庆seo博客
本文地址:https://www.focusonseo.cn/index.php?c=show&id=56
文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为重庆seo博客原创文章,转载或复制请以超链接形式并注明出处。
相关文章
上一篇:鼠标移动到div上变为可点击状态