-moz-image-region

非標準：此功能是非標準的，不在標準化軌道上。不要在面向 Web 的生產網站上使用它：它不會對每個使用者都起作用。實現之間也可能存在很大差異，並且行為在將來可能會發生變化。

對於某些使用來自 list-style-image 屬性的影像的 XUL 元素和偽元素，此屬性指定影像中用作整個影像替代的區域。這允許元素使用同一影像的不同部分來提高效能。

語法類似於 clip 屬性。所有四個值都相對於影像的左上角。

語法

css

/* Keyword value */
-moz-image-region: auto;

/* <shape> value */
-moz-image-region: rect(0, 8px, 4px, 4px);

/* Global values */
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;

值

auto: 自動定義要使用的影像區域。
<shape>: 定義要使用的影像部分的形狀。rect() 函式定義一個要作為形狀使用的矩形。它的引數按此順序定義影像邊緣的頂部、右側、底部和左側偏移量。

正式定義

初始值	`auto`
應用於	XUL `<image>` 元素和 `:-moz-tree-image`、`:-moz-tree-twisty` 和 `:-moz-tree-checkbox` 偽元素。注意：`-moz-image-region` 僅適用於使用 `list-style-image` 指定圖示的 `<image>` 元素。它不適用於 XUL `<image src="url" />`。
繼承	是
計算值	如指定
動畫型別	離散

正式語法

 -moz-image-region =
   <shape> | auto

示例

裁剪影像

css

#example-button {
  /* display only the 4x4 area from the top left of this image */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* use the 4x4 area to the right of the first for the hovered button */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}

規範

不是任何標準的一部分。

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

-moz-image-rect()