CSS/Eigenschaften/clip

Browserunterstützung
caniuse.com

Die Eigenschaft clip legt fest, dass nicht die gesamte Box des Elementes dargestellt wird, sondern nur ein rechteckiger Ausschnitt davon. Die Positionierung der Box wird davon nicht beeinflusst.

Erlaubte Werte

• rect(oben, rechts, unten, links) = beschneidet das Element auf ein Rechteck entsprechend der angegebenen Werte. Sie können die Werteliste durch Kommata trennen, oder nur durch Leerstellen. Für jeden Wert können Sie eine numerisches Längenmaß oder das Schlüsselwort auto notieren. Auto besagt, dass das Clip-Rechteck an dieser Seite bis zum Rand des Elements gehen soll. Längenangaben werden immer vom Außenrand der Border-Box aus gemessen.
  • oben Abstand der oberen Kante des Clip-Rechtecks von der oberen Kante der Border-Box
  • rechts Abstand der rechten Kante des Clip-Rechtecks von der linken Kante Border-Box
  • unten Abstand der unteren Kante des Clip-Rechtecks von der oberen Kante der Border-Box
  • links Abstand der linken Kante des Clip-Rechtecks von der linken Kante der Border-Box
• auto = Voreinstellung, das Element wird nicht beschnitten
• inherit = erbt den clip-Wert des Elternelements

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

auto

anwendbar auf

• HTML: alle absolut positionierten Elemente
• SVG: alle Elemente, die einen neuen Viewport erzeugen (svg, symbol, image, iframe)

Vererbung

nein

animierbar

ja, als Rechteck

Beispiel

img {
  position: absolute;
  overflow: hidden;
  clip: rect(105px 175px 155px 105px);
  transition: all 0.6s ease-in-out;
}
img:hover {
  clip: rect(0px 250px 333px 0px);
}

 

Beachten Sie: Diese Eigenschaft gilt als missbilligt (deprecated), allerdings verlangt die Masking Spezifikation, dass Browser sie implementieren.
Verwenden Sie die clip-path-Eigenschaft, die viel mehr Möglichkeiten bietet.

Siehe auch

• Masken und Beschneidungen
  • clip

Weblinks

• Spezifikation (W3C): clip property
• Details: caniuse.com