-moz-image-region

Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Für ein System, das mit beliebigen Hintergründen funktioniert, siehe -moz-image-rect.

Übersicht

Die -moz-image-region Eigenschaft ist für XUL-Elemente und Pseudo-Elemente, welche ein Bild von der list-style-image Eigenschaft benutzen, gedacht. Die Eigenschaft gibt einen Bereich des Bildes an, welcher anstelle des ganzen Bildes dargestellt wird. Das erlaubt Elementen verschiedene Stücke des gleichen Bildes zu benutzen, um die Leistung zu steigern.
Die Syntax ist derjenigen der clip-Property ähnlich. Alle vier Werte sind relativ von der oberen linken Ecke des Bildes.

Initialwert	`auto`
Anwendbar auf	XUL `image` Elementen und `:-moz-tree-image`, `:-moz-tree-twisty` und `:-moz-tree-checkbox` Pseudoelementen. Hinweis: `-moz-image-region` funktioniert nur mit `image` Elementen, bei denen das Symbol durch `list-style-image` angegeben wird. Es funktioniert nicht mit XUL `<image src="url" />`.
Vererbt	Ja
Medien	visuell
Berechneter Wert	wie angegeben
Animierbar	Nein
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Werte

auto: Standardwert. Es wird nichts ausgeschnitten.
rect(): Es wird ein Bereich ausgeschnitten, der über die vier Längenangaben definert wird.

Formale Syntax

<shape>wobei 
<shape> = rect(<top>, <right>, <bottom>, <left>)

Beispiele

#example-button {
  /* Zeige nur einen 4x4 großen Ausschnitt von der oberen, linken Ecke des Bildes */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* Zeige einen anderen 4x4 großen Ausschnitt vom Bild, wenn sich die Maus über dem Button befindet */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}

Browser Kompatibilität

Browser	ab Version
Internet Explorer	---
Firefox (Gecko)	1.0 (1.0)
Opera	---
Safari (WebKit)	---

Siehe auch

clip