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
Selektor {
clip: rect(oben, rechts, unten, links) | auto;
}
Bildvorbereitung
Nehmen wir an, wir haben ein Naturbild, das wir zuschneiden werden:
<img src="image.jpg" width="500">
:
Beispiel
Lassen Sie uns das Bild zuschneiden, so dass nur der zentrale Teil sichtbar bleibt:
<div class="container">
<img class="image" src="image.jpg">
</div>
.container {
position: relative;
width: 400px;
height: 300px;
}
.image {
position: absolute;
clip: rect(50px, 350px, 250px, 50px);
width: 400px;
height: 300px;
}
: