CSS雪碧图
程序员文章站
2022-06-14 21:42:11
...
一.引言
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.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>
<div class="clearbutton">
<a class="GlobalOrangeButton" href="#"><span>So Neat!</span></a>
</div>
</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;}
运行效果：
文章来源：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites
- Sprites_SlidingDoors-Button.rar (36.9 KB)
- 下载次数: 1