clip

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.

Warnung: Wo möglich, werden Autoren ermutigt, stattdessen die neuere clip-path-Eigenschaft zu verwenden.

Die clip-CSS-Eigenschaft definiert einen sichtbaren Teil 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

<shape>

Eine rechteckige <shape> der Form rect(<top>, <right>, <bottom>, <left>). Die Werte <top> und <bottom> 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 — das heißt, dem Umfang der Innenabstand-Box.

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 zum inneren Rand der Box dieser Seite beschnitten.

auto

Das Element wird nicht beschnitten (Standard). Dies unterscheidet sich von rect(auto, auto, auto, auto), das bis zu den inneren Rändern des Elements beschnitten wird.

Formale Definition

Initialer Wertauto
Anwendbar aufabsolut positionierte Elemente
VererbtNein
Berechneter Wertauto, falls als auto angegeben, ansonsten ein Rechteck mit vier Werten, von denen jeder auto ist, falls als auto angegeben, ansonsten die berechnete Länge
AnimationstypRechteck

Formale Syntax

clip = 
  <rect()>  |
  auto      

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

Beispiele

Zuschneiden eines Bildes

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch