Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies如何建立和使用 CSS 影像雪碧圖
CSS 影像雪碧圖是在文件頁面中所有圖片的合併影像檔案。影像雪碧圖非常有用，因為影像資源只需要載入一次。透過使用 CSS background-position，可以顯示合併影像的不同部分。
我們來看看一個 CSS 影像雪碧圖示例 -
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sprite {
background: url("Capture.png") no-repeat;
width: 280px;
height: 200px;
display: inline-block;
}
.flag1 {
background-position: 0px 0px;
}
.flag2 {
background-position: -255px 0px;
}
.flag3 {
background-position: -510px 0px;
}
.flag4 {
background-position: -765px 0px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<div><h1>Flag Image Sprite</h1></div>
<div class="sprite flag1"></div>
<div class="sprite flag2"></div>
<div class="sprite flag3"></div>
<div class="sprite flag4"></div>
</body>
</html>輸出
更新於: 07-Jan-2020
904 次瀏覽
廣告