---
title: '-moz-image-region'
slug: Web/CSS/-moz-image-region
tags:
  - CSS
  - Non-standard
translation_of: Web/CSS/-moz-image-region
---
<p>{{Non-standard_header}}{{ CSSRef() }}</p>

<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2>

<p>Dla określonych elementów i pseudoelementów XUL, które używają obrazka z własności {{ Cssxref("list-style-image") }}, ta własność określa obszar obrazka, który jest używany w miejsce całego obrazka. Pozwala to elementowi używać różnych fragmentów tego samego obrazka w celu ulepszenia wykonania.</p>

<p>Składnia jest podobna do własności {{ Cssxref("clip") }}. Wszystkie cztery wartości są określane względem górnego lewego rogu obrazka.</p>

<ul>
 <li>Wartość początkowa <code>auto</code></li>
 <li>Dotyczy: element XUL {{ XULElem("image") }} i pseudoelementy {{ Cssxref(":-moz-tree-image") }}, {{ Cssxref(":-moz-tree-twisty") }} oraz {{ Cssxref(":-moz-tree-checkbox") }}</li>
 <li>Dziedziczony: nie</li>
 <li>Procenty: nie dotyczą</li>
 <li>Wartość wyliczona: Dla wartości <code>rect()</code> prostokąt składający się z czterech wyliczonych wartości; w innym przypadku jako określone.</li>
</ul>

<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2>

<pre class="eval">-moz-image-region: rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);
</pre>

<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2>

<pre>#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);
}
</pre>