-moz-image-region

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

Inhalt der Version

{{ CSSRefMozExtensions() }}

Ü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.

Syntax

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

Werte

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

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

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

Quelltext der Version

<p>{{ CSSRefMozExtensions() }}</p>
<h3>Übersicht:</h3>
<p>Die <code>-moz-image-region</code> Eigenschaft ist für XUL-Elemente und Pseudo-Elemente, welche ein Bild von der <a href="/de/CSS/list-style-image" title="de/CSS/list-style-image"><code>list-style-image</code></a> 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.<br>
Die Syntax ist derjenigen der clip-Property ähnlich. Alle vier Werte sind relativ von der oberen linken Ecke des Bildes.</p>
<ul> <li>Standardwert: auto</li> <li>Anwendbar auf: XUL <code><a href="/de/XUL:image" title="de/XUL:image">image</a></code> Elemente und <code><a href="/de/CSS/:-moz-tree-image" title="de/CSS/:-moz-tree-image">:-moz-tree-image</a></code>, <code><a href="/de/CSS/:-moz-tree-twisty" title="de/CSS/:-moz-tree-twisty">:-moz-tree-twisty</a></code>, und <code><a href="/de/CSS/:-moz-tree-checkbox" title="de/CSS/:-moz-tree-checkbox">:-moz-tree-checkbox</a></code> Pseudo-Elemente</li> <li>Vererbbar: Ja</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: für <code>rect()</code> vier Werte für das Rechteck; sonst wie festgelegt</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">-moz-image-region: auto | rect(oben, rechts, unten, links);
</pre>
<h3>Werte</h3>
<dl> <dt>auto</dt> <dd>Standardwert. Es wird nichts ausgeschnitten.</dd> <dt>rect()</dt> <dd>Es wird ein Bereich ausgeschnitten, der über die vier Längenangaben definert wird.</dd>
</dl>
<h3>Beispiele</h3>
<pre>#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);
}

</pre>
<h3>Browser <span>Kompatibilität</span></h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>---</td> </tr> </tbody>
</table>
<h3>Siehe auch</h3>
<ul> <li><a href="/de/CSS/clip" title="de/CSS/clip"><code>clip</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/-moz-image-region", "fr": "fr/CSS/-moz-image-region" } ) }}</p>
Zu dieser Version zurücksetzen