CSS 多个图标的优化

转载于 2016-06-20 16:00:00 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/QAAQ/blog/697412

本文介绍了一种通过将多个图标整合到一张图片中的方法来优化CSS的技巧，并提供了一个实际案例，展示了如何通过调整背景位置来显示不同的图标。

为什么80%的码农都做不了架构师？>>>

CSS 多个图标的优化

今天去查看了一下WEBQQ音乐的前台源码，发现它对播放器的图标只是用了一张图片，发现这是一个很好的一个CSS优化的切入点，于是，就实现了一下，整个代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/backgroud-color.css" />
	</head>
	<body>
	    <div id ="test">nihao</div>
	</body>
</html>

css页面：

#test{
	width: 22px;
    height: 115px;
	background: url(../img/player_bg.png) no-repeat -46px 0px;
}

对于整个页面所用的图标很多时候可以使用一张图片，这个简单的CSS优化就可以做到了。

实验效果自己实现一下就可以看到了。

转载于:https://my.oschina.net/QAAQ/blog/697412