We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Non Non4 Non Non Non1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Non Non Non4 Non Non1 Non

1. See WebKit bug 32177

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mrstork, teoli, pixoux
Dernière mise à jour par : SphinxKnight,