資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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.tw/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://#/">
<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 次瀏覽
廣告