CSS雪碧图

魄竹

2015-12-19

一.引言

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。

二.实现

假设我们通过.toolbtn的类，为应用该类的各元素提供一张背景图片：

<style> .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px } </style>

背景位置，可以通过在background的url()直接定义X,Y轴的值，或者通过background-position属性来添加。例如：

<style>
#btn1 {background-position: -20px 0px}
#btn2 {background-position: -40px 0px}
</style>

id=btn1的元素背景左移20px，id=btn2的元素背景左移40px（假设这两个元素的都添加了toolbtn类，应用了上面样式定义的图片效果）

类似的，你也可以使用下面的方式添加hover的状态：

#btn:hover {background-position: [pixels shifted right]px [pixels shifted down]px;}

三.实例

index.html

<html>
	<head>
		<title>CSS Sprite/Slide Button Demo</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>

<link href="style.css" rel="stylesheet" type="text/css" />

<div id="wrapper">
<p>I've found hundreds of tutorials on the sliding doors button and hundreds on the sprite technique but never a combination of both. This button combines the wonderful sprite technique with the sliding doors technique to make a beautiful button that not only loads in a snap but also looks great and scales to your text! I hope this is something useful for you! Please give me a shout-out if you like and use this code!</p>

<hr />
<h3>Button Examples:</h3>
<div class="clearbutton">
	<a class="GlobalRedButton" href="#"><span>Hey this is so cool!</span></a> 
</div>
<p>
<div class="clearbutton">
	<a class="GlobalBlueButton" href="#"><span>Hey this is even cooler!</span></a> 
</div>
<div class="clearbutton">
	<a class="GlobalBlackButton" href="#"><span>Now I think I'll write a whole sentence in the button!</span></a> 
</div>
<div class="clearbutton">
	<a class="GlobalOrangeButton" href="#"><span>So Neat!</span></a> 
</div>
<div class="clearbutton"></div>
<hr />
<h3>Copy Paste Code:</h3>
</p><p>HTML Code:</p>
<div class="code">
<p>
&lt;div class="clearbutton"&gt;
	&lt;a class="GlobalOrangeButton" href="#"&gt;&lt;span&gt;So Neat!&lt;/span&gt;&lt;/a&gt; 
&lt;/div&gt;
</p>
</div>
<p>CSS Code:</p>
<div class="code">
<p>/* GLOBAL ORANGE BUTTON *****************************/<br />
a.GlobalOrangeButton span {<br />
background: transparent url('images/button_left_orange.png') no-repeat 0 0;<br />
display: block;<br />
line-height: 22px;<br />
padding: 7px 0 5px 18px;<br />
color: #fff;<br />
}</p>
<p>
a.GlobalOrangeButton {<br />
background: transparent url('images/button_right_orange.png') no-repeat top right;<br />
display: block;<br />
float: left;<br />
height: 34px;<br />
margin-right: 6px;<br />
padding-right: 20px;<br />
text-decoration: none;<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size:12px;<br /> 
font-weight:bold;<br />
}</p>
<p>						
a.GlobalOrangeButton:hover span {<br />
background-position: 0 -34px; color: #fff;<br />
}</p>

<p>a.GlobalOrangeButton:hover {<br />
background-position: right -34px;<br />
}</p>
</div>
<h3>The 2 image files:</h3>
<p><img src="images/button_left_orange.png" alt="" border="0" /> <img src="images/button_right_orange.png" alt="" border="0" /></p>

<hr />

<div class="clearbutton">
	<a class="GlobalBlueButton" href="CSS-Sprite-Slide-Button.zip"><span>Download Source Files</span></a> 
</div>
<div class="clearbutton"></div>
<p>Includes all code, images, and Photoshop image files.</p>

<hr />
<h3>Credits:</h3>
<p>
CREATED BY: Brandon Setter<br />
WEBSITE: <a href="http://media-sprout.com">http://Media-Sprout.com</a><br />
FOLLOW ME: <a href="http://twitter.com/bsetter">twitter.com/bsetter</a><br />
CREATION DATE: 10/2009<br />
VERSION 1.0
</p>

<hr />
</div>
	</body>
</html>

style.css

/*
	CREATED BY: Brandon Setter
	WEBSITE: http://Media-Sprout.com
	DATE: 10/2009
	Please give me a shout-out if you like and use this code ;-)
*/


/* DISREGARD THIS PAGE STYLING *****************************/

p, hr, h1, h2, h3					{margin: 10px 0 10px; }
#wrapper							{margin: 0 auto; width: 600px;}
.code								{margin: 0 0 10px 0; padding: 15px; border: 2px solid #999;}

/* BUTTON STYLING FROM HERE DOWN *****************************/

div.clearbutton						{clear:both; height:0; font-size: 1px; line-height: 1px;}


/* GLOBAL RED BUTTON *****************************/
a.GlobalRedButton span 				{background: transparent url('images/button_left_red.png') no-repeat 0 0; display: block; 
									line-height: 22px; padding: 7px 0 5px 18px; color: #fff;} 								
a.GlobalRedButton 					{background: transparent url('images/button_right_red.png') no-repeat top right; 
									display: block;	float: left; height: 34px; margin-right: 6px; 
									padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; 
									font-size:12px; font-weight:bold;}
a.GlobalRedButton:hover span		{background-position: 0 -34px; color: #fff;}
a.GlobalRedButton:hover				{background-position: right -34px;}




/* GLOBAL BLUE BUTTON *****************************/
a.GlobalBlueButton span 			{background: transparent url('images/button_left_blue.png') no-repeat 0 0; display: block; 
									line-height: 22px; padding: 7px 0 5px 18px; color: #fff;} 								
a.GlobalBlueButton 					{background: transparent url('images/button_right_blue.png') no-repeat top right; 
									display: block;	float: left; height: 34px; margin-right: 6px; 
									padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; 
									font-size:12px; font-weight:bold;}
a.GlobalBlueButton:hover span		{background-position: 0 -34px; color: #fff;}
a.GlobalBlueButton:hover			{background-position: right -34px;}


/* GLOBAL ORANGE BUTTON *****************************/
a.GlobalOrangeButton span 			{background: transparent url('images/button_left_orange.png') no-repeat 0 0; display: block; 
									line-height: 22px; padding: 7px 0 5px 18px; color: #fff;} 								
a.GlobalOrangeButton 				{background: transparent url('images/button_right_orange.png') no-repeat top right; 
									display: block;	float: left; height: 34px; margin-right: 6px; 
									padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; 
									font-size:12px; font-weight:bold;}
a.GlobalOrangeButton:hover span		{background-position: 0 -34px; color: #fff;}
a.GlobalOrangeButton:hover			{background-position: right -34px;}



/* GLOBAL BLACK BUTTON *****************************/
a.GlobalBlackButton span 			{background: transparent url('images/button_left_black.png') no-repeat 0 0; display: block; 
									line-height: 22px; padding: 7px 0 5px 18px; color: #fff;} 								
a.GlobalBlackButton 				{background: transparent url('images/button_right_black.png') no-repeat top right; 
									display: block;	float: left; height: 34px; margin-right: 6px; 
									padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; 
									font-size:12px; font-weight:bold;}
a.GlobalBlackButton:hover span		{background-position: 0 -34px; color: #fff;}
a.GlobalBlackButton:hover			{background-position: right -34px;}

运行效果：

CSS雪碧图