CSS Sprites 是一种将多个图像组合成一个图像文件以在网站上使用的方法,以帮助提高性能。
理论:获取图像一次,然后移动它并且只显示它的一部分。这减少了必须获取多个图像的开销。
优点:跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通制作方式下的大量图片,现在合并成一个图片,大大减少了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精灵
转载联系作者并注明出处:https://focusonseo.cn/cassas/32.html