Viele Leute benutzen CSS um Text anzupassen, die Schriftart, die Farbe, die Größe und mehr zu ändern. Aber eine Sache, die viele Leute oft vergessen, ist, dass Sie CSS auch mit Bildern verwenden können.
Das Bild selbst ändern
Mit CSS können Sie anpassen, wie das Bild auf der Seite angezeigt wird. Dies kann sehr nützlich sein, um Ihre Seiten konsistent zu halten. Indem Sie Stile für alle Bilder festlegen, erstellen Sie einen Standardlook für Ihre Bilder. Einige der Dinge, die Sie tun können:
- Fügen Sie einen Rahmen oder Umriss um die Bilder hinzu
- Entfernen Sie den farbigen Rahmen um verknüpfte Bilder
- Anpassen der Breite und/oder Höhe der Bilder
- Schlagschatten hinzufügen
- Bild drehen
- Ändern Sie die Stile wenn das Bild darüber bewegt wird
Ein guter Anfang ist es, Ihrem Bild einen Rahmen zu geben. Aber Sie sollten mehr als nur den Rand berücksichtigen – denken Sie an den gesamten Rand Ihres Bildes und passen Sie die Ränder an und Polsterung auch. Ein Bild mit einem dünnen schwarzen Rand sieht gut aus, aber das Hinzufügen von etwas Auffüllung zwischen dem Rand und dem Bild kann noch besser aussehen.
Es ist eine gute Idee zu Verlinken Sie immer nicht dekorative Bilder, wenn möglich. Denken Sie dabei jedoch daran, dass die meisten Browser einen farbigen Rahmen um das Bild herum hinzufügen. Auch wenn Sie den obigen Code verwenden, um den Rahmen zu ändern, überschreibt der Link dies, es sei denn, Sie entfernen oder ändern auch den Rahmen des Links. Dazu sollten Sie eine CSS-Kindregel verwenden, um den Rahmen um verknüpfte Bilder zu entfernen oder zu ändern:
Sie können auch CSS verwenden, um die Höhe und Breite Ihrer Bilder zu ändern oder festzulegen. Obwohl es aufgrund der Download-Geschwindigkeit keine gute Idee ist, den Browser zum Anpassen der Bildgröße zu verwenden, werden sie viel besser darin, die Größe von Bildern zu ändern, damit sie immer noch gut aussehen. Und mit CSS können Sie Ihre Bilder so einstellen, dass sie alle eine Standardbreite oder -höhe haben oder sogar die Abmessungen relativ zum Container festlegen.
Denken Sie daran, dass Sie beim Ändern der Größe von Bildern für optimale Ergebnisse nur eine Dimension ändern sollten – die Höhe oder die Breite. Dadurch wird sichergestellt, dass das Bild sein Seitenverhältnis behält und daher nicht seltsam aussieht. Setzen Sie den anderen Wert auf Auto oder lassen Sie es weg, um den Browser anzuweisen, das Seitenverhältnis konstant zu halten.
CSS3 bietet mit den neuen Eigenschaften eine Lösung für dieses Problem objekttauglich und Objektposition. Mit diesen Eigenschaften können Sie die genaue Bildhöhe und -breite sowie den Umgang mit dem Seitenverhältnis festlegen. Dies kann Letterboxing-Effekte um Ihre Bilder herum erzeugen oder zuschneiden, damit das Bild in die erforderliche Größe passt.
Es gibt andere CSS3-Eigenschaften, die in den meisten Browsern gut unterstützt werden und mit denen Sie auch Ihre Bilder ändern können. Dinge wie Schlagschatten, abgerundete Ecken und Transformationen zum Drehen, Neigen oder Verschieben Ihrer Bilder funktionieren jetzt in den meisten modernen Browsern. Sie können dann CSS-Übergänge verwenden, um die Bilder zu ändern, wenn Sie den Mauszeiger darüber bewegen, darauf klicken oder einfach nach einer bestimmten Zeit.
Bilder als Hintergründe verwenden
CSS macht es einfach, ausgefallene Hintergründe mit Ihren Bildern zu erstellen. Sie können Hintergründe zur gesamten Seite hinzufügen oder nur auf ein bestimmtes Element. Ein Hintergrundbild auf der Seite erstellen Sie ganz einfach mit dem Hintergrundbild Eigentum:
Ändere das Körper Wählen Sie ein bestimmtes Element auf der Seite aus, um den Hintergrund nur auf ein Element zu setzen.
Eine weitere lustige Sache, die Sie mit Bildern machen können, besteht darin, ein Hintergrundbild zu erstellen, das nicht mit dem Rest der Seite scrollt – wie ein Wasserzeichen. Sie verwenden nur den Stil Hintergrundanhang: behoben; zusammen mit Ihrem Hintergrundbild. Andere Optionen für Ihre Hintergründe sind das horizontale oder vertikale Kacheln mit der Hintergrund Wiederholung Eigentum. Schreiben Hintergrund-Wiederholung: Wiederholung-x; um das Bild horizontal zu kacheln und Hintergrundwiederholung: Wiederholung-y; vertikal zu kacheln. Und Sie können Ihr Hintergrundbild mit dem positionieren position Hintergrundposition Eigentum.
Und CSS3 fügt auch mehr Stile für Ihre Hintergründe hinzu. Sie können Ihre Bilder so dehnen, dass sie in jede Hintergrundgröße passen oder das Hintergrundbild so einstellen, dass es mit der Fenstergröße skaliert. Sie können die Position ändern und dann das Hintergrundbild zuschneiden. Aber eines der besten Dinge an CSS3 ist, dass Sie jetzt mehrere Hintergrundbilder übereinander legen können, um noch kompliziertere Effekte zu erzielen.
HTML5 hilft beim Stylen von Bildern
Das ZAHL -Element in HTML5 sollte um alle Bilder herum platziert werden, die innerhalb des Dokuments allein stehen können. Eine Möglichkeit, darüber nachzudenken, ist, wenn das Bild in einem Anhang erscheinen könnte, dann sollte es innerhalb des ZAHL Element. Sie können dann dieses Element verwenden und die Bildunterschrift -Element, um Ihren Bildern Stile hinzuzufügen.