mozilla

Version 117394 von -moz-image-region

  • Adressname der Version: CSS/-moz-image-region
  • Titel der Version: -moz-image-region
  • ID der Version: 117394
  • Erstellt:
  • Autor: Lukas Skywalker
  • Aktuelle Version? Nein
  • Kommentar 395 words added, 1 words removed

Inhalt der Version

{{ CSSMozExtensionRef() }}

Zusammenfassung

Für manche XUL-Elemente und Pseudo-Elemente, welche ein Bild von der {{ Cssxref("list-style-image") }}-Property benützen, gibt diese Property eine Region des Bildes an, welche anstelle des ganzen Bildes benutzt wird. Das erlaubt Elementen, verschiedene Stücke des gleichen Bildes zu benützen, um die Leistung zu steigern.

Die Syntax ist derjenigen der {{ Cssxref("clip") }}-Property ähnlich. Alle vier Werte sind relativ von der oberen linken Ecke des Bildes.

  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
  • Applies to: XUL {{ XULElem("image") }} elements and {{ Cssxref(":-moz-tree-image") }}, {{ Cssxref(":-moz-tree-twisty") }}, and {{ Cssxref(":-moz-tree-checkbox") }} pseudo-elements
  • {{ Xref_cssinherited() }}: yes
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: For rect() values, a rect consisting of four computed lengths; otherwise as specified.

Syntax

-moz-image-region: rect(oben, rechts, unten, links);

Beispiele

#example-button {
  /* nur die 4x4-Region der oberen linken Ecke des Bildes anzeigen */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* die 4x4-Region rechts vom ersten Bild benützen, um den Hover-Button anzuzeigen */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}

{{ languages( { "en": "en/CSS/-moz-image-region" , "fr": "fr/CSS/-moz-image-region", "pl": "pl/CSS/-moz-image-region"} ) }}

Quelltext der Version

<p>{{ CSSMozExtensionRef() }}</p>
<h3 name="Summary">Zusammenfassung</h3>
<p>Für manche XUL-Elemente und Pseudo-Elemente, welche ein Bild von der {{ Cssxref("list-style-image") }}-Property benützen, gibt diese Property eine Region des Bildes an, welche anstelle des ganzen Bildes benutzt wird. Das erlaubt Elementen, verschiedene Stücke des gleichen Bildes zu benützen, um die Leistung zu steigern.</p>
<p>Die Syntax ist derjenigen der {{ Cssxref("clip") }}-Property ähnlich. Alle vier Werte sind relativ von der oberen linken Ecke des Bildes.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> <li>Applies to: XUL {{ XULElem("image") }} elements and {{ Cssxref(":-moz-tree-image") }}, {{ Cssxref(":-moz-tree-twisty") }}, and {{ Cssxref(":-moz-tree-checkbox") }} pseudo-elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: For <code>rect()</code> values, a rect consisting of four computed lengths; otherwise as specified.</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">-moz-image-region: rect(<em>oben</em>, <span style="font-style: italic;">rechts</span>, <em>unten</em>, <em>links</em>);
</pre>
<h3 name="Examples">Beispiele</h3>
<pre>#example-button {
  /* nur die 4x4-Region der oberen linken Ecke des Bildes anzeigen */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* die 4x4-Region rechts vom ersten Bild benützen, um den Hover-Button anzuzeigen */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}
</pre>
<p>{{ languages( { "en": "en/CSS/-moz-image-region" , "fr": "fr/CSS/-moz-image-region", "pl": "pl/CSS/-moz-image-region"} ) }}</p>
Zu dieser Version zurücksetzen