「Project/Doc/Creating Skin For Mozilla/organize」修訂間的差異
出自 MozTW Wiki
| 行 8： | 行 8： | ||
上圖是包含許多小圖示的來源圖檔，要使用-moz-image-region命令來作處理，每一列包含了四個同樣的圖示但分別表示不同狀態(一般、滑鼠移過、滑鼠按下、無效)。要將每個小圖示裁切下來，你必需在css檔案中指定一個矩形，像是： | 上圖是包含許多小圖示的來源圖檔，要使用-moz-image-region命令來作處理，每一列包含了四個同樣的圖示但分別表示不同狀態(一般、滑鼠移過、滑鼠按下、無效)。要將每個小圖示裁切下來，你必需在css檔案中指定一個矩形，像是： | ||
| − | |||
| − | |||
| − | |||
| − | #button-send | + | #button-send { |
| − | -moz-image-region: rect(294px | + | -moz-image-region: rect(294px 23px 315px 0px); } |
| − | } | ||
| − | #button-send:hover | + | #button-send:hover { |
| − | -moz-image-region: rect(294px | + | -moz-image-region: rect(294px 46px 315px 23px); } |
| − | } | ||
| − | #button-send[disabled="true"] { | + | #button-send:hover:active { |
| − | -moz-image-region: rect(294px 92px 315px 69px) !important; | + | -moz-image-region: rect(294px 69px 315px 46px); } |
| − | } | + | |
| + | #button-send[disabled="true"] { | ||
| + | -moz-image-region: rect(294px 92px 315px 69px) !important; } | ||
指定給Rect的四個值是用順時鐘方向的順序，上、右、下、左。 | 指定給Rect的四個值是用順時鐘方向的順序，上、右、下、左。 | ||
於 2005年5月11日 (三) 23:25 的最新修訂
組織圖示
想要將所有使用的圖示組織起來，你可以將它們全部存在同一張圖片裡，然後告訴Mozilla要使用圖片中的哪一部份。這是靠-moz-image-region命令來達成。
這邊要插入圖片 A bunch of 20px X 20px icons in a grid format
上圖是包含許多小圖示的來源圖檔，要使用-moz-image-region命令來作處理，每一列包含了四個同樣的圖示但分別表示不同狀態(一般、滑鼠移過、滑鼠按下、無效)。要將每個小圖示裁切下來，你必需在css檔案中指定一個矩形，像是：
#button-send {
-moz-image-region: rect(294px 23px 315px 0px); }
#button-send:hover {
-moz-image-region: rect(294px 46px 315px 23px); }
#button-send:hover:active {
-moz-image-region: rect(294px 69px 315px 46px); }
#button-send[disabled="true"] {
-moz-image-region: rect(294px 92px 315px 69px) !important; }
指定給Rect的四個值是用順時鐘方向的順序，上、右、下、左。
