In diesem Artikel werden 5 nützliche CSS- Eigenschaften vorgestellt. Sie sollten damit vertraut sein, werden es aber wahrscheinlich selten nutzen. Ich spreche nicht davon, auf neue CSS3-Eigenschaften zu blicken, sondern über die alten CSS2-Eigenschaften wie Clip, Min-Height, White-Space, Curosr und Display, die von allen Browsern weitgehend unterstützt werden. Verpassen Sie diesen Artikel also nicht, denn er könnte für Sie von großem Nutzen sein.
1. CSS-Clip
Die Clip-Eigenschaft ist wie eine Maske. Es ermöglicht Ihnen, den Inhalt von Seitenelementen mithilfe von Rechtecken zu maskieren. Um ein Element auszuschneiden: Sie müssen seine Positionseigenschaft als absolut angeben und dann die oberen, rechten, unteren und linken Werte relativ zum Element angeben.
.gif)
Beispiel für einen Bildausschnitt ( Demo )
Das folgende Beispiel zeigt, wie die Clip-Eigenschaft zum Maskieren eines Bildes verwendet wird. Geben Sie zuerst das <div>-Element als position:relative an, geben Sie dann das <img>-Element als position:absolute an und legen Sie den rect-Wert entsprechend den tatsächlichen Anforderungen fest.
.gif)
.clip {
Position: relativ;
Höhe: 130px;
Breite: 200px;
Rand: fest 1px #ccc;
}
.clip img {
Position: absolut;
Clip: rect(30px 165px 100px 30px);
}
Bildgröße ändern und zuschneiden ( Demo )
In diesem Beispiel zeige ich Ihnen, wie Sie die Größe eines Bildes ändern und es zuschneiden. Das Archivbild ist rechteckig und ich möchte es auf 50 % seiner Größe verkleinern, um ein Miniaturbild im quadratischen Format zu erstellen. Daher habe ich die Eigenschaften „Breite“ und „Höhe“ verwendet, um die Größe des Bildes zu ändern, und die Eigenschaft „Clip“, um es zu maskieren. Verwenden Sie dann das Attribut left, um das Bild um 15 Pixel nach links zu verschieben.
.gif)
.
Galerie li {
schweben: links;
Rand: 0 10px 0 0;
Position: relativ;
Breite: 70px;
Höhe: 70px;
Rand: durchgehend 1px #000;
}
.gallery img {
Breite: 100px;
Höhe: 70px;
Position: absolut;
Clip: rect(0 85px 70px 15px);
links: -15px;
}