-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

css
-moz-image-rect(url("my-url"), top, right, bottom, left);

Werte

<url>

Die URL des Bildes, aus dem der Teil ausgeschnitten werden soll.

top

Die obere Kante, angegeben als <integer> oder <percentage>, des Teilbildes innerhalb des angegebenen Bildes.

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 erlaubt es Ihnen, zum Beispiel verschiedene Teile eines größeren Bildes als Hintergründe in unterschiedlichen Bereichen Ihres Inhalts zu 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 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 darzustellen. Ein Klick auf ihren Container bewirkt, dass die vier Segmente durch Vertauschen der background-image Eigenschaftswerte die Position rotieren.

CSS

Das CSS definiert einen Containerstil und dann die Stile für die vier Boxen, die das vollständige Bild ausmachen.

Der Container sieht wie folgt aus:

css
#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 abgrenzen. Schauen wir uns diese nacheinander an.

css
#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.

css
#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:

css
#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 inkludieren einen Container mit vier Boxen:

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>

Dies platziert die vier Segmente unseres Bildes in einem Raster von zwei mal zwei Boxen. 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 empfängt.

js
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 ihn auf das folgende Element zu verschieben. Beachten Sie, dass es, bevor es beginnt, eine Kopie des Stil des letzten Box speichert, da dieser vom Stil des dritten Elements überschrieben wird. Durch das Kopieren der Werte der background-image Eigenschaft von einem Element zum nächsten bei jedem Mausklick erreichen wir den gewünschten Effekt.

Wie es aussieht

Spezifikationen

Nicht Teil eines Standards.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch