-moz-image-region

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

list-style-image プロパティの画像を使用している特定の XUL 要素や擬似要素では、このプロパティは画像全体の代わりに使用される画像の領域を指定します。これにより、要素は同じ画像の異なる部分を使用してパフォーマンスを向上させることができます。

css
/* キーワード値 */
-moz-image-region: auto;

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

/* グローバル値 */
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;

構文は clip プロパティと似ています。4 つの値はすべて、画像の左上隅を基準にしています。

メモ: 背景画像で動作する仕組みについては、 -moz-image-rect() を参照してください。

構文

値

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" /> では機能しません。
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

Error: could not find syntax for this item

例

画像の切り抜き

css
#example-button {
  /* この画像の左上から 4x4 の領域のみを表示する */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* 最初のボタンの右にある 4x4 の領域を、ホバーされたボタンに使用します。 */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}

仕様書

どの標準にも含まれていません。

ブラウザーの互換性

BCD tables only load in the browser

関連情報