Verwenden von CSS mit Bildern

Gestalten Sie Ihre Bilder und verwenden Sie Bilder in Stilen

Alan Powdrill / Getty Images

Viele Leute benutzen CSS um den 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.

Ändern des Bildes selbst

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 ein einheitliches Aussehen für Ihre Bilder. Einige der Dinge, die Sie tun können:

• Fügen Sie einen Rahmen oder eine Kontur um die Bilder hinzu
• Entfernen Sie den farbigen Rand um verlinkte Bilder
• Anpassen der Breite und/oder Höhe der Bilder
• Fügen Sie einen Schlagschatten hinzu
• Drehen Sie das Bild
• Ändern Sie die Stile wenn das Bild überfahren wird

Deinem Bild einen Rand zu geben, ist ein guter Anfang. Aber Sie sollten mehr als nur den Rand berücksichtigen – denken Sie an den gesamten Rand Ihres Bildes und passen Sie die Ränder und Ränder an Polsterung auch. Ein Bild mit einem dünnen schwarzen Rand sieht gut aus, aber das Hinzufügen von Füllmaterial 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. Aber wenn Sie das tun, denken Sie daran, dass die meisten Browser einen farbigen Rahmen um das Bild hinzufügen. Selbst wenn Sie den obigen Code verwenden, um den Rahmen zu ändern, wird der Link diesen außer Kraft setzen, es sei denn, Sie entfernen oder ändern auch den Rahmen des Links. Dazu sollten Sie eine untergeordnete CSS-Regel 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 immer besser darin, die Größe von Bildern so zu ändern, dass sie immer noch gut aussehen. Und mit CSS können Sie Ihre Bilder auf eine Standardbreite oder -höhe einstellen oder sogar die Abmessungen relativ zum Container festlegen.

Denken Sie daran, wenn Sie die Größe von Bildern ändern, sollten Sie für beste Ergebnisse nur eine Dimension ändern – die Höhe oder die Breite. Dadurch wird sichergestellt, dass das Bild sein Seitenverhältnis beibehält und nicht seltsam aussieht. Stellen Sie den anderen Wert auf ein 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 definieren und wie das Seitenverhältnis gehandhabt werden soll. Dies kann zu Letterboxing-Effekten um Ihre Bilder herum oder zu Zuschnitten führen, damit das Bild in die erforderliche Größe passt.

Es gibt andere CSS3-Eigenschaften, die in den meisten Browsern gut unterstützt werden und die Sie auch zum Ändern Ihrer Bilder verwenden können. Dinge wie Schlagschatten, abgerundete Ecken und Transformationen zum Drehen, Neigen oder Verschieben Ihrer Bilder funktionieren jetzt alle in den meisten modernen Browsern. Sie können dann CSS-Übergänge verwenden, um die Bilder zu ändern, wenn Sie mit der Maus darüber fahren, darauf klicken oder einfach nach einer gewissen Zeit.

Verwenden von Bildern als Hintergründe

CSS macht es einfach, ausgefallene Hintergründe mit Ihren Bildern zu erstellen. Du kannst Fügen Sie der gesamten Seite Hintergründe hinzu oder nur auf ein bestimmtes Element. Es ist einfach, mit dem ein Hintergrundbild auf der Seite zu erstellen Hintergrundbild Eigentum:

Ändere das Karosserie Selektor zu einem bestimmten Element auf der Seite, um den Hintergrund auf nur einem Element zu platzieren.

Eine weitere lustige Sache, die Sie mit Bildern machen können, ist, ein Hintergrundbild zu erstellen, das nicht mit dem Rest der Seite scrollt – wie ein Wasserzeichen. Sie verwenden nur den Stil Hintergrund-Anhang: behoben; zusammen mit Ihrem Hintergrundbild. Weitere Optionen für Ihre Hintergründe sind, dass Sie sie mithilfe von nur horizontal oder vertikal kacheln lassen Hintergrund Wiederholung Eigentum. Schreiben Hintergrundwiederholung: Wiederholung-x; um das Bild horizontal zu kacheln und Hintergrundwiederholung: Wiederholung-y; senkrecht kacheln. Und Sie können Ihr Hintergrundbild mit positionieren Hintergrund-Position Eigentum.

Und CSS3 fügt auch mehr Stile für Ihre Hintergründe hinzu. Sie können Ihre Bilder strecken, um sie an einen Hintergrund jeder Größe anzupassen, oder das Hintergrundbild so einstellen, dass es mit der Fenstergröße skaliert wird. Sie können die Position ändern und dann das Hintergrundbild ausschneiden. Aber eines der besten Dinge an CSS3 ist, dass Sie jetzt mehrere Hintergrundbilder übereinander legen können, um noch kompliziertere Effekte zu erzeugen.

HTML5 hilft bei der Gestaltung von Bildern

Das ZAHL -Element in HTML5 sollte um alle Bilder herum platziert werden, die innerhalb des Dokuments alleine stehen können. Eine Möglichkeit, darüber nachzudenken, wäre, wenn das Bild in einem Anhang erscheinen könnte, dann sollte es innerhalb des sein ZAHL Element. Sie können dann dieses Element und die verwenden BILDUNTERSCHRIFT -Element, um Ihren Bildern Stile hinzuzufügen.