No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Resumen
Este valor para la propiedad CSS background-image te permite usar una parte de una imagen de gran tamaño como fondo. Esto permitirá, por ejemplo, usar diferentes partes de una imagen grande como si fueran una sóla imagen grande usada como fondo de diferentes partes de tú contenido.
Funciona de manera similar a la propiedad -moz-image-region , que se usa junto con la propiedadlist-style-image para utilizar partes de imágnes como iconos de listas. Sin embargo puede ser usado para cualquier fondo CSS.
La síntaxis para el rectánigulo es similar a la de la función rect() y genera un tipo CSS <shape> . Los cuatro valores son relativos a la esquina superior izquierda de la imagen.
Síntaxis
-moz-image-rect(<uri>, top, right, bottom, left);
Valores
<uri>- La URI de la imagen de la que se cogera una parte.
top- El borde superior, especificado como
<length>, de la subimagen dentro de la imagen seleccionada. right- El borde derecho, especificado como
<length>, de la subimagen dentro de la imagen seleccionada. bottom- El borde inferior, especificado como
<length>, de la subimagen dentro de la imagen seleccionada. left- El borde izquierdo, especificado como
<length>, de la subimagen dentro de la imagen seleccionada.
Ejemplo
Este ejemplo carga una imagen y la usa en cuatro segmento para dibujar el logo de Firefox en cuatro bloques <div> blocks. Si hacemos click en el contenedor los cuatro segmentos rotarán cmabiando los valores de la propiedad background-image entre estos cuatro bloques <div>.
CSS
El CSS define un estilo para el contenedor y, posteriormente los estilos para las cuatro cajas que comprenden la imagen completa.
Para el contenedor:
#container {
width:267px;
height:272px;
top:100px;
left:100px;
position:absolute;
font-size:16px;
text-shadow:white 0px 0px 6px;
text-align:center;
}
posteriormente las cuatro caja se defines las cajas que especifican los segmentos de la imagen. La vamos a ver una por una.
#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;
}
Esta es la esquina superior izquierda de la imagen. Define un rectángulo que contiene el cuartil superior izquierda de la imagen firefox.jpg.
#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;
}
Esto define la esquina superior derecha:
Las otras dos siguen un patrón similar:
#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
Es bastante simple:
<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>
Sitúa los 4 segmentos de una imagen en un caja de 2x2 celdas. Estos cuatro elementos están dentro de un bloque <div> más grande cuya función es recibir eventos click y mandarlos al código JavaScript.
El codigo javaScript
Gestiona el evento click cuando el contenedor recibe un click de ratón
function rotate() {
var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
// Una vez hemos guardado la última, empezamos a rotar.
for (var i=1; i<=4; i++) {
var curId = "box" + i;
// Permuta las imágenes de fondo.
var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
document.getElementById(curId).style.backgroundImage = prevStyle;
prevStyle = curStyle;
}
}
Usa window.getComputedStyle() para establecer el estilo de cada elemento, cambiándolo al elemento posterior. Destacar que, una vez se empieza se guarda una copia del estilo de la última caja ya que será sobreescrito por el tercer elemento. Simplemente copiando los valores de la propiedad background-image de un elemento al siguiente, cuando hacemos click de ratón, conseguiremos el efecto deseado.