-moz-image-rect

La propriété -moz-image-rect permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à background-image). On peut ainsi utiliser une image qui regroupe plusieurs sprites à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.

Cette propriété fonctionne de façon analogue à -moz-image-region qui peut être utilisée pour déterminer la partie d'une image utilisée pour list-style-image qui met en forme les puces d'une liste. Grâce à -moz-image-rect, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.

La syntaxe de cette propriété est similaire à la fonction rect() qui génère une valeur de type <shape>. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.

Syntaxe

-moz-image-rect(<uri>, top, right, bottom, left);

Valeurs

<uri>

L'URI de l'image dont on veut obtenir une portion.

top

La coordonnée du bord haut de l'image, définie comme une longueur (<length>) mesurée à partir du coin supérieur gauche.

right

La coordonnée du bord droit de l'image, définie comme une longueur (<length>) mesurée à partir du coin supérieur gauche.

bottom

La coordonnée du bord inférieur de l'image, définie comme une longueur (<length>) mesurée à partir du coin supérieur gauche.

left

La coordonnée du bord gauche de l'image, définie comme une longueur (<length>) mesurée à partir du coin supérieur gauche.

Exemples

Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments <div>. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.

CSS

#container {
  width:267px;
  height:272px;
  top:100px;
  left:100px;
  position:absolute;
  font-size:16px;
  text-shadow:white 0px 0px 6px;
  text-align:center;
}

#box1 {
  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
  width:133px;
  height:136px;
  position:absolute;
}

#box2 {
  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
  width:133px;
  height:136px;
  position:absolute;
}

#box3 {
  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
  width:133px;
  height:136px;
  position:absolute;
}

#box4 {
  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
  width:133px;
  height:136px;
  position:absolute;
}

HTML

<div id="container" onclick="rotate()">
  <div id="box1" style="left:0px;top:0px;">Top left</div>
  <div id="box2" style="left:133px;top:0px;">Top right</div>
  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
</div>

JavaScript

function rotate() {
  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
  
  // Now that we've saved the last one, start rotating
  
  for (var i=1; i<=4; i++) {
    var curId = "box" + i;
    
    // Shift the background images
    
    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }    
}

Dans ce script, on utilise la méthode window.getComputedStyle() afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de background-image d'un élément à l'autre lors du clic, on obtient l'effet souhaité.

Résultat

Compatibilité des navigateurs