如何用css顯示一個圖片中多個小圖示
阿新 • • 發佈：2020-12-30
CSS顯示一個大圖片中的多個小圖示，主要是用background-position這個屬性來控制的。
先看下面這張300*300的大圖片，每個小圖示是100*100的。(這張圖片名字叫9pic2.jpg)
首先先將你要放置背景小圖示的元素的大小設定成圖片裡圖示的實際大小，用width和height設定，然後用background-image把背景圖片放進去，比如：
.showImage{
background-image: url(9pic2.jpg);
width: 100px;
height: 100px;
}
這麼設定完畢後，大圖片左上角那個小圖示（這裡假設是100*100的小圖示）就出來了。
然後用background-position屬性調整背景圖片的位置，它有兩個值分別表示背景圖片沿著x和y軸移動的距離。你想象背景圖片一開始是和當前元素左上角重合，但背景圖片是可以移動的，由於瀏覽器座標系x軸正向右，y軸正向下。所以，背景圖片一般需要向左移動，和向上移動，這樣移動的值往往都是負的。
比如上面第2張小圖示，需要把大圖片沿著x方向向左移動100px，y方向不變，設定background-position屬性如下：
#item2{
background-position: -100px 0;
}
其他的同理。
最後貼出來一個例子，看明白了這個屬性就懂了。
用到的另一張圖片名字叫9pic1.jpg,先貼出來
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景background-position切圖</title>
<style>
.showImage{
background-image: url(9pic2.jpg);
width: 100px;
height: 100px; 這個例子把那個圖片打散，橫排在頁面上，還用:hover偽類實現了你滑鼠移動到上面就從黑白變彩色。