-moz-image-rect
Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.
Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, kann sie bereits aus den relevanten Webstandards entfernt worden sein, befindet sich im Prozess der Entfernung oder wird nur aus Kompatibilitätsgründen beibehalten. Vermeiden Sie die Verwendung und aktualisieren Sie gegebenenfalls bestehenden Code; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu treffen. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktionieren kann.
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 entnommen werden soll.
top
-
Der obere Rand, angegeben als
<integer>
oder<percentage>
, des Teilbildes innerhalb des angegebenen Bildes. right
-
Der rechte Rand, angegeben als
<integer>
oder<percentage>
, des Teilbildes innerhalb des angegebenen Bildes. bottom
-
Der untere Rand, angegeben als
<integer>
oder<percentage>
, des Teilbildes innerhalb des angegebenen Bildes. left
-
Der linke Rand, 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.
Dies funktioniert sehr ähnlich wie die Eigenschaft -moz-image-region
, die mit der Eigenschaft list-style-image
verwendet wird, um Teile eines Bildes als Aufzählungszeichen in Listen zu verwenden. Diese Eigenschaft kann jedoch für jeden CSS-Hintergrund verwendet werden.
Die Syntax für das Rechteck ist ähnlich der rect()
Funktion, die einen <shape>
CSS-Typ erzeugt. 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 zu zeichnen. Durch Klicken auf ihren Container rotieren die vier Segmente, indem die Werte der Eigenschaft background-image
zwischen den vier <div>
Blöcken ausgetauscht werden.
CSS
Das CSS definiert einen Container-Stil und dann die Stile für die vier Boxen, die das vollständige Bild bilden.
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 einzeln.
#box1 {
background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
width: 133px;
height: 136px;
position: absolute;
}
Dies ist die obere 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;
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;
position: absolute;
}
#box4 {
background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
width: 133px;
height: 136px;
position: absolute;
}
HTML
Das HTML ist recht einfach:
<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>
Dies platziert die vier Segmente unseres Bildes in einem Zwei-mal-zwei-Raster. Diese vier Segmente befinden sich alle in einem größeren <div>
Block, dessen Hauptzweck darin besteht, Klickereignisse zu empfangen und an unseren JavaScript-Code zu übermitteln.
Der JavaScript-Code
Dieser Code verarbeitet das Klickereignis, wenn der Container einen Mausklick erhält.
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;
}
}
Dies verwendet window.getComputedStyle()
, um den Stil jedes Elements abzurufen und auf das folgende Element zu verschieben. Beachten Sie, dass er, bevor er damit beginnt, eine Kopie des Stils der letzten Box speichert, da dieser durch den Stil des dritten Elements überschrieben wird. Indem die Werte der Eigenschaft background-image
von einem Element zum nächsten bei jedem Mausklick kopiert werden, erzielen wir den gewünschten Effekt.
Wie es aussieht
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
BCD tables only load in the browser