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: Autoren wird empfohlen, stattdessen die clip-path-Eigenschaft 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

css

/* 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, definiert mit einer rect()-Funktion der Form rect(<top>, <right>, <bottom>, <left>). Die <top>- und <bottom>-Werte sind Abstände vom inneren oberen Rand des Rahmens der Box, während <right> und <left> Abstände vom inneren linken Rand des Rahmens der Box sind, also die Ausdehnung des Padding-Bereichs.

Die Werte <top>, <right>, <bottom> und <left> können entweder eine <length> oder auto sein. Wenn der Wert einer Seite auto ist, wird das Element bis zur inneren Rahmenkante dieser Seite beschnitten.

Hinweis: Die rect() <shape>-Funktion, die in der veralteten clip-Eigenschaft verwendet wird, unterscheidet sich von der CSS rect()-Funktion, die verwendet wird, um eine CSS <basic-shape> zu definieren.

auto: Das Element wird nicht beschnitten (Standard). Dies unterscheidet sich von rect(auto, auto, auto, auto), welches das Element bis zu den inneren Rahmenkanten beschneidet.

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

clip = 
  <rect()>  |
  auto      

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )

Beispiele

Ein Bild beschneiden

html

<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>

css

.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