日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > CSS >内容正文

CSS

CSS学习笔记——精灵图(sprite)

發(fā)布時間：2023/12/8 CSS 55 豆豆
生活随笔 收集整理的這篇文章主要介紹了 CSS学习笔记——精灵图(sprite) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

CSS學習筆記目錄

  • 一、什么是精靈圖？
  • 二、精靈圖的優(yōu)點
  • 三、精靈圖的基本用法
    • 1、打開ps導入精靈圖
    • 2、測量字母的大小及坐標
    • 3、效果圖
    • 4、代碼實現(xiàn)
  • 總結

一、什么是精靈圖？

所謂精靈圖就是圖片拼合技術，它就是把多張小圖合成一張大圖，通過css中的background-position屬性，顯示精靈圖中某一個小圖標。精靈圖如下：

二、精靈圖的優(yōu)點

  • 采用了精靈圖這一技術可以緩解加載時間過長從而影響用戶體驗的這個問題。
  • 在一定程度上減少了頁面的加載速度，也一定程度上緩解了服務器的壓力。
  • 使用精靈圖可以有效減少服務器接收和發(fā)送請求的次數(shù)，從而達到提高頁面的加載性能。

    • 三、精靈圖的基本用法

    1.工具：PS、HBuilder
    2.素材：任意一張精靈圖都行

    1、打開ps導入精靈圖

    這里拼出的字母案例為KK

    2、測量字母的大小及坐標

    • 通過矩形選框工具，測量字母的大小，并將div的大小設置為字母的大小。
    • 打開窗口菜單欄中的信息，可以查詢字母width、height、x軸和y軸的信息。
    • 將鼠標光標移動到字母的左上角位置，通過右側的信息面板測出x和y的值。
    • 在css中編寫style樣式，通過background-position定位到字母所在的位置。

    3、效果圖

    4、代碼實現(xiàn)

    <!DOCTYPE html> <html><head><meta charset="utf-8"><title>精靈圖的使用</title><style>/* 共同的樣式 */div{background: url(../images/images/abcd.jpg) ;/* 導入精靈圖資源 */float: left;/* 設置向左浮動 */}.box1{/* 盒子的高度寬度要和精靈圖的大小一致 */width: 106px;height: 107px;background-position: -494px -142px;/* 分別對應x 和 y 軸 *//* 在ps中進行定位的時候，把光標放在矩形選區(qū)的左上角，可以得到位置 */}.box2{/* 盒子的高度寬度要和精靈圖的大小一致 */width: 106px;height: 107px;background-position: -494px -142px;/* 分別對應x 和 y 軸 *//* 在ps中進行定位的時候，把光標放在矩形選區(qū)的左上角，可以得到位置 */}</style></head><body><div class="box1"></div><div class="box2"></div></body> </html>

    總結

  • 精靈圖主要針對小的背景圖片使用。
  • 精靈圖的顯示主要借助于背景位置來實現(xiàn)——background-position
  • 一般情況下精靈圖都是負值。
  • 網(wǎng)頁中的坐標：x軸右邊是正值，左邊是負值，y軸也是和x軸一樣的原理。

    • 總結

    以上是生活随笔為你收集整理的CSS学习笔记——精灵图(sprite)的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。