Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
clip
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 dieKompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.
Warnung:Autoren wird empfohlen, stattdessen die Eigenschaftclip-path zu verwenden.
Dieclip-EigenschaftCSS definiert einen sichtbaren Teil eines Elements. Dieclip-Eigenschaft gilt nur für absolut positionierte Elemente – also Elemente mitposition:absolute oderposition:fixed.
Syntax
/* Keyword value */clip: auto;/* <shape> values */clip: rect(1px, 10em, 3rem, 2ch);/* Global values */clip: inherit;clip: initial;clip: revert;clip: revert-layer;clip: unset;Werte
rect()Ein Rechteck, das mit einer
rect()-Funktion der Formrect(<top>, <right>, <bottom>, <left>)definiert wird. Die Werte<top>und<bottom>sind Versätze vomoberen Innenrand des Rahmens, während<right>und<left>Versätze vomlinken Innenrand des Rahmens sind – das heißt, vom Umfang der Padding-Box.Die Werte
<top>,<right>,<bottom>, und<left>können entweder eine<length>oderautosein. Wenn der Wert einer Seiteautoist, wird das Element auf deninneren Rand dieser Seite beschnitten.
Hinweis:Dierect()-<shape>-Funktion, die in der veraltetenclip-Eigenschaft verwendet wird, unterscheidet sich von der CSS-rect()-Funktion, die verwendet wird, um eine CSS-<basic-shape> zu definieren.
autoDas Element wird nicht beschnitten (Standard). Dies unterscheidet sich von
rect(auto, auto, auto, auto), welches auf die Innenränder des Elements beschneidet.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | absolut positionierte Elemente |
| Vererbt | Nein |
| Berechneter Wert | auto, falls alsauto angegeben, ansonsten ein Rechteck mit vier Werten, von denen jederauto ist, falls alsauto angegeben, ansonsten die berechnete Länge |
| Animationstyp | Rechteck |
Formale Syntax
clip =
<rect()>|
auto
<rect()> =
rect(<top> ,<right> ,<bottom> ,<left>)
Beispiele
Zuschneiden eines Bildes
<p> <img src="macarons.png" alt="Original graphic" /> <img src="macarons.png" alt="Graphic clipped to upper left" /> <img src="macarons.png" alt="Graphic clipped towards middle" /> <img src="macarons.png" alt="Graphic clipped to bottom right" /></p>.dotted-border { border: dotted; position: relative; width: 390px; height: 400px;}#top-left,#middle,#bottom-right { position: absolute; top: 0;}#top-left { left: 400px; clip: rect(0, 130px, 90px, 0);}#middle { left: 270px; clip: rect(100px, 260px, 190px, 130px);}#bottom-right { left: 140px; clip: rect(200px, 390px, 290px, 260px);}Spezifikationen
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |