1. 首页>>前端>>CSS

css sprites精灵的使用方法


  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>

sprites精灵



1、首先我们需要一张合集的多图,比如我们一般网站上用到的,logo小图标等

2、在使用的时候需要给该图片设置宽与高

3、然后使用background-position属性的x,y来找到图片

4、设置图像大小可以用transform:scale( x )来控制图标大小


这个情况中找xy的坐标其实是一件很麻烦的事情,推荐一款工具,可以很好的找到坐标css精灵

转载联系作者并注明出处:https://www.focusonseo.cn/css/32.html