-moz-image-rect() CSS-Funktion
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Der -moz-image-rect Wert für CSS background-image ermöglicht es Ihnen, einen Teil eines größeren Bildes als Hintergrund zu verwenden.
Syntax
-moz-image-rect(url("my-url"), top, right, bottom, left);
Werte
<url>-
Die URI des Bildes, aus dem das Teilbild genommen wird.
top-
Die obere Kante, angegeben als
<integer>oder<percentage>, des Teilbildes innerhalb des angegebenen Bildes. right-
Die rechte Kante, angegeben als
<integer>oder<percentage>, des Teilbildes innerhalb des angegebenen Bildes. bottom-
Die untere Kante, angegeben als
<integer>oder<percentage>, des Teilbildes innerhalb des angegebenen Bildes. left-
Die linke Kante, angegeben als
<integer>oder<percentage>, des Teilbildes innerhalb des angegebenen Bildes.
Beschreibung
Diese Eigenschaft ermöglicht es Ihnen zum Beispiel, verschiedene Teile eines größeren Bildes als Hintergründe in verschiedenen Teilen Ihres Inhalts zu verwenden.
Die Syntax für das Rechteck ähnelt der Funktion rect(), die einen CSS-Typ <shape> generiert. Alle vier Werte sind relativ zur oberen linken Ecke des Bildes.
Beispiele
Dieses Beispiel lädt ein Bild und verwendet es in vier Segmenten, um das Firefox-Logo in vier <div> Blöcken darzustellen. Ein Klick auf ihren Container bewirkt, dass die vier Segmente sich durch Austauschen der background-image Eigenschaftswerte in den vier <div> Blöcken drehen.
CSS
Das CSS definiert einen Container-Stil und dann die Stile für die vier Kästchen, die das komplette Bild darstellen.
Der Container sieht folgendermaßen aus:
#container {
width: 267px;
height: 272px;
top: 100px;
left: 100px;
position: absolute;
font-size: 16px;
text-shadow: white 0px 0px 6px;
text-align: center;
}
Dann werden die vier Boxen definiert, die die Segmente des Bildes darstellen. Betrachten wir sie nacheinander.
#box1 {
background-image: -moz-image-rect(url("firefox.png"), 0%, 50%, 50%, 0%);
width: 133px;
height: 136px;
left: 0px;
top: 0px;
position: absolute;
}
Dies ist die oberste linke Ecke des Bildes. Es definiert ein Rechteck, das das obere linke Viertel des Bildes in der Datei firefox.jpg enthält.
#box2 {
background-image: -moz-image-rect(url("firefox.png"), 0%, 100%, 50%, 50%);
width: 133px;
height: 136px;
left: 133px;
top: 0px;
position: absolute;
}
Dies definiert die obere rechte Ecke des Bildes.
Die anderen Ecken folgen einem ähnlichen Muster:
#box3 {
background-image: -moz-image-rect(url("firefox.png"), 50%, 50%, 100%, 0%);
width: 133px;
height: 136px;
left: 0px;
top: 136px;
position: absolute;
}
#box4 {
background-image: -moz-image-rect(url("firefox.png"), 50%, 100%, 100%, 50%);
width: 133px;
height: 136px;
left: 133px;
top: 136px;
position: absolute;
}
HTML
Wir fügen einen Container mit vier Boxen hinzu:
<div id="container">
<div id="box1">Top left</div>
<div id="box2">Top right</div>
<div id="box3">Bottom left</div>
<div id="box4">Bottom right</div>
</div>
Dies platziert die vier Segmente unseres Bildes in einem zwei-zu-zwei-Box-Raster. Diese vier Segmente sind alle in einem größeren <div> Block enthalten, dessen Hauptzweck es ist, Klickereignisse zu empfangen und sie an unseren JavaScript-Code zu übergeben.
JavaScript
Dieser Code behandelt das Klickereignis, wenn der Container einen Mausklick empfängt.
function rotate() {
let prevStyle = window
.getComputedStyle(document.getElementById("box4"), null)
.getPropertyValue("background-image");
// Now that we've saved the last one, start rotating
for (let i = 1; i <= 4; i++) {
const curId = `box${i}`;
// Shift the background images
const curStyle = window
.getComputedStyle(document.getElementById(curId), null)
.getPropertyValue("background-image");
document.getElementById(curId).style.backgroundImage = prevStyle;
prevStyle = curStyle;
}
}
document.getElementById("container").addEventListener("click", rotate);
Dies verwendet window.getComputedStyle(), um den Stil jedes Elements abzurufen und ihn zum nachfolgenden Element zu verschieben. Beachten Sie, dass vor Beginn eine Kopie des Stils der letzten Box gespeichert wird, da dieser durch den Stil des dritten Elements überschrieben wird. Durch das Kopieren der Werte der background-image Eigenschaft von einem Element zum nächsten bei jedem Mausklick erzielen wir den gewünschten Effekt.
Wie es aussieht
Spezifikationen
Nicht Teil eines Standards.