原始网址:http://www.w3schools.com/css/css_image_sprites.asp
翻译:
CSS 图片小精灵(CSS Image Sprites)
图片小精灵(Image Sprites)
图片小精灵是指将图片集放入单张图片中。
含有很多图片的 web 页面加载时间会很长,还会产生多个服务器请求。
使用图片小精灵将减少服务期请求数、节省带宽(bandwidth)。
图片小精灵 - 简单示例
我们使用单张图片("img_navsprites.gif"
)取代 3 张独立的图片:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<div>
<p><img src="http://www.w3schools.com/css/img_navsprites.gif" alt="navigation images"></p>
</div>
</body>
</html>
使用 CSS,我们可以只显示整张图片中我们需要的部分。
在下列示例中,CSS 指定 "img_navsprites.gif"
图片的哪个部分被显示:
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
#home {
width: 46px;
height: 44px;
background: url('http://www.w3schools.com/css/img_navsprites.gif') 0 0;
}
#next {
width: 43px;
height: 44px;
background: url('http://www.w3schools.com/css/img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<div>
<img id="home" src="http://www.w3schools.com/css/img_trans.gif">
<br />
<br />
<img id="next" src="http://www.w3schools.com/css/img_trans.gif">
</div>
</body>
</html>
示例解释:
<img id="home" src="img_trans.gif">
- 只是为了定义一张小的透明图,因为src
属性不能为空。我们使用 CSS 指定它以背景图显示。width: 46px; height: 44px;
- 定义我们想要使用的图片部分。background: url(img_navsprites.gif) 0 0;
- 定义背景图以及它的位置(left 0px, top 0px
)。
这是使用图片小精灵最简单的方式,现在,我们想要使用链接和 hover 效果对它进行扩展。
图片小精灵 - 创建导航列表
我们想要使用图片小精灵("img_navsprites.gif"
)创建导航列表。
我们将使用一个 HTML 列表,因为它可以包含链接,同时也支持背景图:
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('http://www.w3schools.com/css/img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('http://www.w3schools.com/css/img_navsprites.gif') -47px
0;
}
#next {
left: 129px;
width: 43px;
background: url('http://www.w3schools.com/css/img_navsprites.gif') -91px
0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="http://www.w3schools.com/css/default.asp"></a></li>
<li id="prev"><a href="http://www.w3schools.com/css/css_intro.asp"></a></li>
<li id="next"><a href="http://www.w3schools.com/css/css_syntax.asp"></a></li>
</ul>
</body>
</html>
示例解释:
#navlist {position:relative;}
- 设置相对定位以允许内部可进行绝对定位。#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
- 将内外边距设置为 0,去掉列表式样,所有列表项均为绝对定位。#navlist li, #navlist a {height:44px;display:block;}
所有图片的高度均为 44px 。
现在,我们开始对每个特定部分进行定位和样式化:
#home {left:0px;width:46px;}
- 定位至最左侧,图片宽度设置为 46px 。#home {background:url(img_navsprites.gif) 0 0;}
- 定义背景图以及对它进行定位(left 0px, top 0px
)。#prev {left:63px;width:43px;}
- 向右定位 63px(#home width 46px + 各个item之间的额外空间
),宽为 43px 。#prev {background:url('img_navsprites.gif') -47px 0;}
- 定义背景图向右 47px(#home width 46px + 1px line divider
)#next {left:129px;width:43px;}
- 定位向右 129px(start of #prev is 63px + #prev width 43px + extra space
),宽 43px 。#next {background:url('img_navsprites.gif') -91px 0;}
- 定义背景图向右 91px(#home width 46px + 1px line divider + #prev width 43px + 1px line divider
)。
图片小精灵 - 悬停效果(Hover Effect)
现在,我们想要对导航列表添加悬停效果(hover effect)。
:hover 选择器可被用于所有元素,不限于链接。 |
我们的新图片("img_navsprites_hover.gif"
)包含了 3 张导航图片以及 3 张用于悬停效果的图片:
由于这是单张图片,而不是 6 个独立文件,当用户鼠标悬停图片之上的时候将没有加载延迟(no loading delay)。
添加悬停效果我们只增加了 3 行代码:
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') -91px 0;
}
#home a:hover {
background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') 0 -45px;
}
#prev a:hover {
background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') -47px -45px;
}
#next a:hover {
background: url('https://i-blog.csdnimg.cn/blog_migrate/22b1a074cc82aaec341cf8ea788b99ae.gif') -91px -45px;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="http://www.w3schools.com/css/default.asp"></a></li>
<li id="prev"><a href="http://www.w3schools.com/css/css_intro.asp"></a></li>
<li id="next"><a href="http://www.w3schools.com/css/css_syntax.asp"></a></li>
</ul>
</body>
</html>
示例解释:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;}
- 对所有 3 张悬停图片,我们指定了相同的背景位置,只是递降 45px 。