按鈕不閃爍（精靈圖）
阿新 • • 發佈：2020-08-18
效果展示：
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> a:link{ display: block; width: 93px; height: 29px; background-image: url('./img/09/btn.png') } a:hover{ background-position: -93px 0; } a:active{ background-position: -186px 0; }/* 圖片屬於網頁中的外部資源，外部資源都需要瀏覽器單獨傳送請求載入， 瀏覽器載入外部資源時是按需載入的，用則載入，不用則不載入 像我們上邊的練習link會首先載入，而hover和active會在指定狀態觸發時才會載入 解決圖片閃爍的問題： 可以將多個小圖片統一儲存到一個大圖片中，然後通過調整background-position來顯示的圖片 這樣圖片會同時載入到網頁中 就可以有效的避免出現閃爍的問題 這個技術在網頁中應用十分廣泛，被稱為CSS-Sprite，這種圖我們稱為雪碧圖 雪碧圖的使用步驟： 1.先確定要使用的圖示 2.測量圖示的大小 3.根據測量結果建立一個元素 4.將雪碧圖設定為元素的背景圖片 5.設定一個偏移量以顯示正確的圖片 雪碧圖的特點： 一次性將多個圖片載入進頁面，降低請求的次數，加快訪問速度，提升使用者的體驗*/ .box1{ width: 128px; height: 46px; background-image: url('./img/09/amazon-sprite_.png'); background-position:0 0; } .box2{ width: 42px; height: 30px; background-image: url('./img/09/amazon-sprite_.png'); background-position: -58px -338px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <a href="javascript:;"></a> </body> </html>
素材：
amazon-sprite_.png：
btn.png