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 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.
Warnung:
Es wird empfohlen, stattdessen die Eigenschaft clip-path
zu verwenden.
Die clip
-CSS-Eigenschaft definiert einen sichtbaren Bereich eines Elements. Die clip
-Eigenschaft gilt nur für absolut positionierte Elemente, das heißt, Elemente mit position:absolute
oder position: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 in der Formrect(<top>, <right>, <bottom>, <left>)
definiert wird. Die Werte<top>
und<bottom>
sind Offsets von der innenseitigen oberen Begrenzungslinie des Rahmens, während<right>
und<left>
Offsets von der innenseitigen linken Begrenzungslinie des Rahmens sind — das heißt, das Ausmaß des Innenabstands.Die Werte
<top>
,<right>
,<bottom>
, und<left>
können entweder ein<length>
oderauto
sein. Wenn der Wert einer Seiteauto
ist, wird das Element an der innenseitigen Begrenzung dieser Seite abgeschnitten.
Hinweis:
Die rect()
-<shape>
-Funktion, die in der veralteten clip
-Eigenschaft verwendet wird, unterscheidet sich von der CSS-rect()
-Funktion, die zur Definition einer CSS-<basic-shape>
verwendet wird.
auto
-
Das Element wird nicht abgeschnitten (Standard). Dies unterscheidet sich von
rect(auto, auto, auto, auto)
, das das Element an seiner innenseitigen Begrenzungslinie abschneidet.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | absolut positionierte Elemente |
Vererbt | Nein |
Berechneter Wert | auto , falls als auto angegeben, ansonsten ein Rechteck mit vier Werten, von denen jeder auto ist, falls als auto angegeben, ansonsten die berechnete Länge |
Animationstyp | Rechteck |
Formale Syntax
Beispiele
Zuschneiden eines Bildes
<p class="dotted-border">
<img src="macarons.png" alt="Original graphic" />
<img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
<img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
<img
id="bottom-right"
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 |