极客笔记什么是CSS精灵，如何在页面上实现它们
什么是CSS中的精灵
在CSS中，精灵是一种通过将多个图像合并为单个图像的技术，从而减少浏览器的HTTP请求次数。在这种技术中，我们需要将多个图像合并为单个图像。之后，我们可以将单个图像设置为每个图像元素的背景，并且在组合的图像中设置位置以显示特定图像。
在这里，我们可以使用像Photoshop、画图等图像编辑工具将不同的图像合并为单个图像。之后，我们可以使用不同的背景位置来显示网页上的不同图像。
为什么我们要使用精灵
使用CSS精灵的主要好处是减少了HTTP请求的总数。而不是下载多个图像，浏览器只需要下载单个图像，这样可以节省网页的带宽。
因此，它提高了网页的加载速度和性能，因为它节省了带宽。
让我们通过不同的示例来了解如何使用CSS精灵。
示例1
在下面的示例中，我们使用了TutorialPoint网站的标志图像。它包含了“t”字符和“tutorialspoint”文本。
在这里，我们将分别显示logo图标和文本。我们有两个div元素，分别命名为first和second，并为两个div元素设置了不同的尺寸和相同的背景图像。之后，我们设置了背景位置以将logo图标和文本显示为不同的图像。
<html>
<head>
<style>
.first {
width: 70px;
height: 69px;
background: url('https://www.tutorialspoint.com/static/images/logo.png?v2') 0 0 no-repeat;
background-position: -10px 7px;
}
.second {
margin-top: 20px;
width: 270px;
height: 69px;
background: url('https://www.tutorialspoint.com/static/images/logo.png?v2') 0 0 no-repeat;
background-position: -78px 7px;
}
</style>
</head>
<body>
<h3> Using the <i> CSS sprites </i> to use the multiple images from single combined images </h3>
<h4> The original image is as shown below. </h4>
<img src = "https://www.tutorialspoint.com/static/images/logo.png?v2" alt = "logo">
<h4> After dividing the image into two halves. </h4>
<div class = "first"> </div>
<div class = "second"> </div>
</body>
</html>
示例2
在这个示例中，我们使用了一个包含5个不同自然图像的合并图像。在这里，我们创建了一个图片画廊，想要展示不同的图像，并在’gallery’ div中添加了多个div元素。
在CSS中，我们为每个div元素设置了尺寸，并设置了相同的合并背景图像。然后，我们使用’background-position’属性调整了背景图像的位置，使其分别显示每个图像。
<html>
<head>
<style>
img {
width: 200px;
height: 200px;
}
.gallery {
display: flex;
flex-wrap: wrap;
height: 1000px;
justify-content: space-around;
}
.image1 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: 0px 0px;
}
.image2 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: -560px 0px;
}
.image3 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: -10px -500px;
}
.image4 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: -300px -500px;
}
.image5 {
width: 300px;
height: 300px;
background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
background-position: -600px -500px;
}
</style>
</head>
<body>
<h3> Using the <i> CSS sprites </i> to use the multiple images from single combined images </h3>
<h4> The original image is as shown below. </h4>
<img src = "https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924" alt = "nature">
<h4> After implementing the CSS sprites. </h4>
<div class = "gallery">
<div class = "image1"> </div>
<div class = "image2"> </div>
<div class = "image3"> </div>
<div class = "image4"> </div>
<div class = "image5"> </div>
</div>
</body>
</html>
示例3
在这里，我们将所有社交媒体图标合并为一张图片。然后，我们创建了无序列表来展示合并图像中的所有社交媒体图标。在列表中，我们添加了”标签，并在其中使用了 ‘div’ 元素，它将以背景的形式包含社交媒体图标。
在CSS中，我们首先需要为每个图标设置一些尺寸。此外，我们还设置了背景图像的尺寸。此外，我们还设置了背景位置，以单独显示每个社交媒体图标。
在输出中，用户可以单击任何社交媒体图标，将被重定向到相应的网页。
<html>
<head>
<style>
img {
width: 500px;
height: 300px;
}
.social {
display: flex;
flex-wrap: wrap;
width: 450px;
justify-content: space-around;
}
.facebook,
.instagram,
.twitter,
.linkedin,
.youtube,
.whatsapp,
.tiktok {
width: 100px;
height: 100px;
background: url('https://static.vecteezy.com/system/resources/previews/003/600/947/original/set-of-social-media-icon-in-round-bakground-free-vector.jpg') 0 0 no-repeat;
background-size: 400px 300px;
}
.facebook { background-position: 0px -38px;}
.instagram { background-position: -95px -35px;}
.twitter {background-position: -190px -35px;}
.linkedin {background-position: -280px -165px;}
.youtube {background-position: 0px -165px;}
.whatsapp {background-position: -190px -160px;}
.tiktok {background-position: -280px -38px;}
ul {display: flex; flex-wrap: wrap;justify-content: space-around;}
li {list-style: none;}
</style>
</head>
<body>
<h3> Using the <i> CSS sprites </i> to use the mutiple images from single combined images </h3>
<h4> The original image is as shown below. </h4>
<img src = "https://static.vecteezy.com/system/resources/previews/003/600/947/original/set-of-social-media-icon-in-round-bakground-free-vector.jpg" alt = "Social media icons">
<h4> After implementing the CSS sprites. </h4>
<div class = "social">
<ul>
<li> <a href = "https://www.facebook.com/">
<div class = "facebook"> </div>
</a>
</li>
<li> <a href = "https://www.instagram.com/">
<div class = "instagram"> </div>
</a>
</li>
<li> <a href = "https://www.twitter.com/">
<div class = "twitter"> </div>
</a>
</li>
<li> <a href = "https://www.linkedin.com/">
<div class = "linkedin"> </div>
</a>
</li>
<li> <a href = "https://www.youtube.com/">
<div class = "youtube"> </div>
</a>
</li>
<li>
<a href = "https://www.whatsapp.com/">
<div class = "whatsapp"> </div>
</a>
</li>
<li>
<a href = "https://www.tiktok.com/">
<div class = "tiktok"> </div>
</a>
</li>
</ul>
</div>
</body>
</html>
用户学会使用CSS sprites从单个合并的图像中显示多个图像。主要情况下，我们应该使用CSS sprites来提高网页性能，因为我们只需要下载一个大文件，而不是多个单个文件。在第二个示例中，我们创建了一个画廊，但用户也可以使用相同的技术创建图像幻灯片。