Eigenschaft clip

Die Eigenschaft clip ermöglicht es, ein absolut positioniertes Element zu beschneiden, so dass nur der angegebene rechteckige Bereich sichtbar bleibt. Der Wert wird mit der Funktion rect angegeben.

Syntax

cssSelektor {
  clip: rect(oben, rechts, unten, links) | auto;
}

Bildvorbereitung

Nehmen wir an, wir haben ein Naturbild, das wir zuschneiden werden:

html<img src="image.jpg" width="500">

Результат:

Beispiel

Lassen Sie uns das Bild zuschneiden, so dass nur der zentrale Teil sichtbar bleibt:

html<div class="container">
  <img class="image" src="image.jpg">
</div>

css.container {
  position: relative;
  width: 400px;
  height: 300px;
}
.image {
  position: absolute;
  clip: rect(50px, 350px, 250px, 50px);
  width: 400px;
  height: 300px;
}

Результат:

Siehe auch