数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究什么是 CSS 雪碧图以及如何在页面上实现它们？
什么是 CSS 雪碧图？
在 CSS 中，雪碧图是一种技术，我们可以用它来减少网页浏览器发出的 HTTP 请求数量。这种技术需要将多张图片组合成一张图片。之后，我们可以为每个图片元素设置这张单一图片作为背景，并设置位置以显示组合图片中的特定图片。
这里，我们可以使用图像编辑工具（如 Photoshop、画图等）将不同的图像组合成一张图像。之后，我们可以使用这张单一图像以及不同的背景位置在网页上显示不同的图像。
为什么要使用雪碧图？
使用 CSS 雪碧图的主要好处是它减少了 HTTP 请求的总数。此外，浏览器只需要下载一张图片，而不是下载多张图片，从而节省了网页的带宽。
因此，它通过节省带宽来提高网页加载速度和性能。
让我们通过不同的示例来了解如何使用 CSS 雪碧图。
示例 1
在下面的示例中，我们使用了 TutorialPoint 网站的徽标图像。它包含艺术形式的“t”和文本形式的“tutorialspoint”。
在这里，我们将分别从单一图像中显示徽标图标和文本。我们有两个名为 first 和 second 的 div 元素，我们为这两个 div 元素设置了不同的尺寸和相同的背景图像。之后，我们设置背景位置以显示徽标图标和文本作为不同的图像。
<html>
<head>
<style>
.first {
width: 70px;
height: 69px;
background: url('https://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://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://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
在这里，我们将所有社交媒体图标组合成一张图像。之后，我们创建了一个无序列表，以从组合图像中显示所有社交媒体图标。在列表中，我们添加了“<a>”标签，并在其中使用了“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://127.0.0.1/">
<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 雪碧图从单个组合图像中显示多个图像。主要的是，我们应该使用 CSS 雪碧图来提高网页性能，因为我们只需要下载一个大的文件而不是多个单个文件。在第二个示例中，我们创建了一个图库，但用户也可以使用相同的技术创建图像幻灯片。
更新于：2023年5月3日
124 次浏览
广告