CSS学习笔记——精灵图(sprite)
生活随笔
收集整理的這篇文章主要介紹了
CSS学习笔记——精灵图(sprite)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS學習筆記目錄
- 一、什么是精靈圖？
- 二、精靈圖的優點
- 三、精靈圖的基本用法
- 1、打開ps導入精靈圖
- 2、測量字母的大小及坐標
- 3、效果圖
- 4、代碼實現
- 總結
一、什么是精靈圖？
所謂精靈圖就是圖片拼合技術，它就是把多張小圖合成一張大圖，通過css中的background-position屬性，顯示精靈圖中某一個小圖標。精靈圖如下：
二、精靈圖的優點
三、精靈圖的基本用法
1.工具：PS、HBuilder
2.素材：任意一張精靈圖都行
1、打開ps導入精靈圖
這里拼出的字母案例為KK
2、測量字母的大小及坐標
- 通過矩形選框工具，測量字母的大小，并將div的大小設置為字母的大小。
- 打開窗口菜單欄中的信息，可以查詢字母width、height、x軸和y軸的信息。
- 將鼠標光標移動到字母的左上角位置，通過右側的信息面板測出x和y的值。
- 在css中編寫style樣式，通過background-position定位到字母所在的位置。
3、效果圖
4、代碼實現
<!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中進行定位的時候，把光標放在矩形選區的左上角，可以得到位置 */}.box2{/* 盒子的高度寬度要和精靈圖的大小一致 */width: 106px;height: 107px;background-position: -494px -142px;/* 分別對應x 和 y 軸 *//* 在ps中進行定位的時候，把光標放在矩形選區的左上角，可以得到位置 */}</style></head><body><div class="box1"></div><div class="box2"></div></body> </html>總結
總結
以上是生活随笔為你收集整理的CSS学习笔记——精灵图(sprite)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSP-J2021原题目及答案
- 下一篇： Ubuntu aria2c 下载