P62-前端基礎CSS-背景圖片位移之雪碧圖效果
阿新 • • 發佈：2021-01-28
技術標籤：最美前端# 前端【H5+Css3】
P62-前端基礎CSS-背景圖片位移之雪碧圖效果
1.概述
問題描述：
當我們使用背景圖片做一些滑鼠hover和點選狀態時切換圖片顯示一些不同的效果，會遇到一個小問題，就是圖片是懶載入方式，第一次訪問網頁時只會請求第一張圖片，滑鼠hover和點選動作的圖片只有在觸發時才會傳送請求下載該圖片到本地，就是在這個下載過程中會出現切換圖片空白期。
解決思路：
- 可以將多個小圖片統一儲存到一個大圖片中，然後通過調整background-position來顯示的圖片
- 這樣圖片會同時載入到網頁中 就可以有效的避免出現閃爍的問題
- 這個技術在網頁中應用十分廣泛，被稱為CSS-Sprite，這種圖我們稱為雪碧圖
雪碧圖的特點：
一次性將多個圖片載入進頁面，降低請求的次數，加快訪問速度，提升使用者的體驗雪碧圖的使用步驟：
- 1.先確定要使用的圖示
- 2.測量圖示的大小
- 3.根據測量結果建立一個元素
- 4.將雪碧圖設定為元素的背景圖片
- 5.設定一個偏移量以顯示正確的圖片
2.雪碧圖案例
2.1.背景圖片
2.2.雪碧圖使用案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片位移練習雪碧圖</title>
<style 3.雪碧圖效果
3.1.首次載入時第一張的效果
3.2.滑鼠hover時展示第二張效果
3.3.滑鼠點選時展示第三張效果
