-moz-image-rect
Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch 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, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.
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 wird.
top
-
Die obere Kante, angegeben als ein
<integer>
oder<percentage>
, des Teilbildes innerhalb des angegebenen Bildes. right
-
Die rechte Kante, angegeben als ein
<integer>
oder<percentage>
, des Teilbildes innerhalb des angegebenen Bildes. bottom
-
Die untere Kante, angegeben als ein
<integer>
oder<percentage>
, des Teilbildes innerhalb des angegebenen Bildes. left
-
Die linke Kante, angegeben als ein
<integer>
oder<percentage>
, des Teilbildes innerhalb des angegebenen Bildes.
Beschreibung
Mit dieser Eigenschaft können Sie beispielsweise verschiedene Teile eines größeren Bildes als Hintergründe in verschiedenen Teilen Ihres Inhalts verwenden.
Dies funktioniert sehr ähnlich wie die -moz-image-region
Eigenschaft, die mit der list-style-image
Eigenschaft verwendet wird, um Teile eines Bildes als Aufzählungszeichen in Listen zu verwenden. Diese Eigenschaft kann jedoch für beliebige CSS-Hintergründe verwendet werden.
Die Syntax für das Rechteck ist ähnlich der Funktion rect()
, die einen <shape>
CSS-Typ erzeugt. Alle vier Werte beziehen sich auf die obere linke 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. Durch Klicken auf deren Container werden die vier Segmente rotiert, indem die Werte der background-image
Eigenschaft zwischen den vier <div>
Blöcken ausgetauscht werden.
CSS
Das CSS definiert einen Containerstil und dann die Stile für die vier Boxen, die das vollständige Bild bilden.
Der Container sieht wie folgt aus:
#container {
width: 267px;
height: 272px;
top: 100px;
left: 100px;
position: absolute;
font-size: 16px;
text-shadow: white 0px 0px 6px;
text-align: center;
}
Danach werden die vier Boxen definiert, die die Segmente des Bildes bestimmen. Sehen wir uns diese nacheinander an.
#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
Wir fügen einen Container mit vier Boxen ein:
<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 zweireihigen, zweispaltigen Gitternetz. Diese vier Segmente sind alle innerhalb eines größeren <div>
Blocks enthalten, dessen Hauptzweck es ist, Klickereignisse zu empfangen und an unseren JavaScript-Code weiterzuleiten.
Der JavaScript-Code
Dieser Code behandelt 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;
}
}
Er verwendet window.getComputedStyle()
, um den Stil jedes Elements abzurufen und es auf das nächste Element zu verschieben. Beachten Sie, dass zu 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.