每日一个css效果之css sprites

栏目: CSS · 发布时间: 4年前

内容简介：使用css sprites是减少图片资源请求次数的首选方法。将一些背景图片组合到一张图片中，并在css文件中使用以上是雅虎web性能优化最佳实践中的Minimize HTTP Requests(减少http请求次数)中的一个策略，使用css sprites。并不是所有的图片都需要组合到一起，需要组合的图片：ico、图标等小型图片。大型的图不需要应用css sprites。

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

使用css sprites是减少图片资源请求次数的首选方法。将一些背景图片组合到一张图片中，并在css文件中使用 background-image 和 background-position 属性展示需要的图片部分。

以上是雅虎web性能优化最佳实践中的Minimize HTTP Requests(减少http请求次数)中的一个策略，使用css sprites。

并不是所有的图片都需要组合到一起，需要组合的图片：ico、图标等小型图片。大型的图不需要应用css sprites。

实现方式

1.首先把需要的图标利用ps等工具合成到一张图片中，例如

2.编写css样式

在编写展示图片的时候要注意两点：

图片的定位
图片容器的宽和高

由于css sprites主要的应用是展示图标等小型图片，通常需要与其他元素展示在一行中，所以在编写css代码时有一个很方便的技巧是将容器的 display 属性设置为 inline-block ，既可以方便的设置容器的宽和高又可以与其他需要的元素共处一行，例如：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>home</title>

	<style>
		.ico {
			height: 16px;
			width: 16px;
			display: inline-block;
			background-image: url("images/ico.png");
		}
		.ico-alert {
			background-position: 0 0;
		}
		.ico-word {
			background-position: -24px 0;
		}
		.ico-excel {
			background-position: -48px 0;
		}
		.ico-ppt {
			background-position: -72px 0;
		}
		.ico-pdf {
			background-position: -96px 0;
		}
		.ico-txt {
			background-position: -120px 0;
		}
		a {
			display: inline-block;
			width: 35px;
			text-align: center;
			margin: 5px;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div>
		<span class="ico ico-alert"></span><a href="#">alert</a>
		<span class="ico ico-word"></span><a href="#">word</a> <br>
		<span class="ico ico-excel"></span><a href="#">excel</a>
		<span class="ico ico-ppt"></span><a href="#">ppt</a> <br>
		<span class="ico ico-pdf"></span><a href="#">pdf</a>
		<span class="ico ico-txt"></span><a href="#">txt</a>
	</div>
</body>
</html>
复制代码

效果如下

其核心代码为

/* 设置容器的高度,宽度和图片 */
.ico {
	height: 16px;
	width: 16px;
	display: inline-block;
	background-image: url("images/ico.png");
}
/* 定位显示的背景 */
.ico-alert {
	background-position: 0 0;
}
复制代码

background-position 有三种定位方式