CSS clip – Bildausschnitt anzeigen

Mit der CSS Eigenschaft clip ist es möglich, nur einen Teil eines Bildes darzustellen. Sozusagen einen Bildausschnitt zu ermöglichen.
Dafür gibt es verschiedene Möglichkeiten. Eine wird in diesem CSS Tutorial gezeigt.

Beispielcode zu CSS clip

CSS

#einBild{
width:200px;
height:150px;
background-color:#BEBEBE;
}
#einBild img{
position:absolute;
clip:rect(20px 150px 100px 20px);
overflow:hidden;
}

HTML

<div id="einBild">
<img src="schwan.jpg" />
</div>

Beispielcode hier ansehen: CSS clip Beispiel

Erläuterung zum clip-Code

Wir haben ein DIV, welches eine feste Höhe und Breite zugewiesen bekommen hat. Darin liegt ein IMG (Image), welches ersteinmal absolut positioniert wurde.
Nun kommt unsere clip-Eigenschaft dazu, welche wir 4 Werte übergeben haben. Das sind die 4 Koordinaten, um ein Rechteck an seinen Platz zu weisen.

CSS Clip: Bildausschnitt Wertübergabe

Informationen und Werte

Vererbbar: Nein
Anwendbar: auf positionierte Elemente
Initialwert: auto (automatisch)
Werte:rect() zur Erstellung eines Rechteckes mit 4 Werten

• 1. Wert: bestimmt die linke Ecke von oben
• 2. Wert: bestimmt die rechte Ecke von links
• 3. Wert: bestimmt die rechte Ecke von oben
• 4. Wert: bestimmt die linke Ecke von links