舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

Project/Doc/Creating Skin For Mozilla/organize

出自 MozTW Wiki

於 2005年5月11日 (三) 23:22 由 218.34.241.5對話 所做的修訂
(比較) ←上一修訂 | 查看目前修訂 (比較) | 下一修訂→ (比較)

組織圖示

想要將所有使用的圖示組織起來,你可以將它們全部存在同一張圖片裡,然後告訴Mozilla要使用圖片中的哪一部份。這是靠-moz-image-region命令來達成。

這邊要插入圖片 A bunch of 20px X 20px icons in a grid format

上圖是包含許多小圖示的來源圖檔,要使用-moz-image-region命令來作處理,每一列包含了四個同樣的圖示但分別表示不同狀態(一般、滑鼠移過、滑鼠按下、無效)。要將每個小圖示裁切下來,你必需在css檔案中指定一個矩形,像是:

  1. button-send {
 -moz-image-region: rect(294px 23px 315px 0px);

}

  1. button-send:hover {
 -moz-image-region: rect(294px 46px 315px 23px);

}

  1. button-send:hover:active {
 -moz-image-region: rect(294px 69px 315px 46px);

}

  1. button-send[disabled="true"] {
 -moz-image-region: rect(294px 92px 315px 69px) !important;

}

指定給Rect的四個值是用順時鐘方向的順序,上、右、下、左。



個人工具