55.背景练习2 - 《CSS》

html:
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/91背景练习.css">
</head>
<body>
    <div class="box1"></div>
</body>
</html>

css:
（1）当浏览器第一次加载图片时，在一些图片出现特效时，会有一些闪烁现象，为了解决这种问题，采用把图片集合为一张图片，然后通过background-position:；来移动图片；
（2）此种方法被称为雪碧图
（3）装图片时，要设定好宽高，正好装下图片

代码：

.box1 {
    width: 93px;
    height: 29px;
    background-image: url('../img/btn.png');
}
.box1:link {
    background-image: url('../img/btn.png');
}
.box1:hover {
    background-image: url('../img/btn.png');
    background-position: -93px 0;
}
.box1:active {
    background-image: url('../img/btn.png');
    background-position: -186px 0;
}