blob: 8b8315df3c8e5b8d1d2536dbbed62e83743d25c3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
---
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>
|
