按钮练习
Ninefire 6月 06, 2018
我们可以将一张按钮形状的图片设置为一个块元素的背景图片，那么就有了一个简单的按钮。
目前我们学习了<a></a>标签，是可以被点击的元素，那么我们暂时先使用<a></a>标签来制作按钮。
3个按钮背景图片：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮练习</title>
<style type="text/css">
.btn {
/* 设置超链接为块元素 */
display: block;
/* 设置超链接大小 */
width: 120px;
height: 55px;
/* 使超链接居中显示以方便观察 */
margin: 300px auto;
/* 给超链接设置背景图片 */
background-image: url(link.png)
}
/* 设置鼠标移入的背景图片 */
.btn:hover {
background-image: url(hover.png)
}
/* 设置鼠标点击的背景图片 */
.btn:active {
background-image: url(active.png)
}
</style>
</head>
<body>
<a href="#" class="btn"></a>
</body>
</html>
效果就像这样 <<戳它
貌似很完美的结局，但我们不难发现，在第一次切换背景图片时（即网页刚打开或者刷新后，第一次鼠标移入和点击时），背景图片会有一个短暂的闪烁现象，这个闪烁现象会造成一次不佳的用户体验。
产生问题的原因：
背景图片是以外部资源的形式加载进入网页的，浏览器每加载一个外部资源就需要单独发送一次请求，但是外部资源并不是同时加载的，浏览器只会在资源被使用时才去加载资源。
这个按钮的网页，刚打开时浏览器只会加载link.png，由于hover和active的状态没有马上被触发，所以hover.png和active.png并不是立即加载的。
只有当hover和active分别被触发时浏览器才会分别加载hover.png和active.png。
由于加载图片需要一定的时间，所以在加载和显示的过程中会存在一段时间，背景图片无法显示，导致出现闪烁现象。
而“第二次”浏览器会直接使用图片缓存，因此不会出现闪烁情况。
为了解决该问题，可以将3个按钮图片整合为一张图片，这样可以同时将3张图片一起加载，就不会出现闪烁问题了，然后再通过background-position来切换要显示的图片的位置。
这种技术叫做图片整合技术（CSS-Sprite）。
优点：
- 浏览器只需要发送一次请求，可以同时加载多个图片元素，，提高了访问效率和用户体验。
- 减小了图片的中大小，节省了请求时间，增加了用户体验。
整合后的1张图片：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮练习</title>
<style type="text/css">
body{
background: #bfa;
}
.btn {
/* 设置超链接为块元素 */
display: block;
/* 设置超链接大小 */
width: 120px;
height: 55px;
/* 使超链接居中显示以方便观察 */
margin: 300px auto;
/* 给超链接设置背景图片 */
background-image: url(btn.png)
}
/* 设置鼠标移入的背景图片 */
.btn:hover {
/* hover状态时使图片向左移动121像素 */
background-position: -121px;
}
/* 设置鼠标点击的背景图片 */
.btn:active {
/* active状态时使图片向左移动242像素 */
background-position: -242px;
}
</style>
</head>
<body>
<a href="#null" class="btn"></a>
</body>
</html>
效果就与之前完全不同，而是像这样 <<戳它
如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/HTML&CSS.basics/58.html