-moz-image-region

  • Raccourci de la révision : CSS/-moz-image-region
  • Titre de la révision : -moz-image-region
  • ID de la révision : 186248
  • Créé :
  • Créateur : Fredchat
  • Version actuelle ? Non
  • Commentaire mise à jour

Contenu de la révision

{{ CSSMozExtensionRef() }}

Résumé

Por certains éléments et pseudo-éléments XUL, qui utilisent une image de la propriété {{ Cssxref("list-style-image") }}, cette propriété définit la portion de l'image à utiliser à la place de l'image entière. Cela permet d'utiliser plusieurs morceaux d'un même image pour améliorer les performances.

La syntaxe est similaire à celle de la propriété {{ Cssxref("clip") }}. Les quatre valeurs sont relatives au coin supérieur gauche de l'image.

  • Valeur initiale : auto
  • S'applique à : éléments XUL {{ XULElem("image") }} et {{ Cssxref(":-moz-tree-image") }}, {{ Cssxref(":-moz-tree-twisty") }}, et les pseudo-éléments {{ Cssxref(":-moz-tree-checkbox") }}
  • Héritée : oui
  • Pourcentages: N/A
  • Valeur calculée : Pour les valeurs de rect(), un rectangle étant constitué de quatre longueurs calculées ; autrement, comme spécifié.

Syntaxe

-moz-image-region: rect(top, right, bottom, left);

Exemples

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


Interwiki Languages Links

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

Source de la révision

<p> {{ CSSMozExtensionRef() }}
</p>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>Por certains éléments et pseudo-éléments XUL, qui utilisent une image de la propriété {{ Cssxref("list-style-image") }}, cette propriété définit la portion de l'image à utiliser à la place de l'image entière. Cela permet d'utiliser plusieurs morceaux d'un même image pour améliorer les performances.
</p><p>La syntaxe est similaire à celle de la propriété {{ Cssxref("clip") }}. Les quatre valeurs sont relatives au coin supérieur gauche de l'image.
</p>
<ul><li> Valeur initiale : <code>auto</code>
</li><li> S'applique à : éléments XUL {{ XULElem("image") }} et {{ Cssxref(":-moz-tree-image") }}, {{ Cssxref(":-moz-tree-twisty") }}, et les pseudo-éléments {{ Cssxref(":-moz-tree-checkbox") }}
</li><li> Héritée : oui
</li><li> Pourcentages: N/A
</li><li> Valeur calculée : Pour les valeurs de <code>rect()</code>, un <i>rectangle</i> étant constitué de quatre longueurs calculées ; autrement, comme spécifié.
</li></ul>
<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
<pre class="eval">-moz-image-region: rect(<i>top</i>, <i>right</i>, <i>bottom</i>, <i>left</i>);
</pre>
<h3 id="Exemples" name="Exemples"> Exemples </h3>
<pre class="eval">#example-button {
  /* display only the 4x4 area from the top left of this image */
  list-style-image: url("<a class=" external" href="chrome://example/skin/example.png" rel="freelink">chrome://example/skin/example.png</a>");
  -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>
<p><br>
<span class="comment">Interwiki Languages Links</span>
</p>{{ languages( { "en": "en/CSS/-moz-image-region", "pl": "pl/CSS/-moz-image-region" } ) }}
Revenir à cette révision