CSS mit Bildern verwenden

Gestalten Sie Ihre Bilder und verwenden Sie Bilder in Stilen

Viele Leute verwenden CSS, um Text anzupassen, die Schriftart, die Farbe, die Größe und mehr zu ändern. Eine Sache, die viele Leute oft vergessen, ist, dass Sie CSS auch für Bilder verwenden können.

Das Bild selbst ändern

Mit CSS können Sie anpassen, wie das Bild auf der Seite angezeigt wird. Dies kann sehr hilfreich sein, um Ihre Seiten konsistent zu halten. Indem Sie Stile für alle Bilder festlegen, erstellen Sie ein standardmäßiges Erscheinungsbild 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 verknüpfte Bilder
  • Anpassen der Breite und / oder Höhe der Bilder
  • Fügen Sie einen Schlagschatten hinzu
  • Bild drehen
  • Ändern Sie die Stile, wenn Sie den Mauszeiger über das Bild halten

Wenn Sie Ihrem Bild einen Rahmen geben, ist dies ein guter Anfang. Sie sollten jedoch mehr als nur den Rand berücksichtigen - denken Sie an den gesamten Bildrand und passen Sie auch die Ränder und den Abstand an. Ein Bild mit einem dünnen schwarzen Rand sieht gut aus, aber ein gewisser Abstand zwischen Rand und Bild kann noch besser aussehen.

img {
Rand: 1px festes Schwarzes;
Polsterung: 5px;
}

Es ist eine gute Idee, nicht dekorative Bilder immer zu verknüpfen, wenn dies möglich ist. Denken Sie jedoch daran, dass die meisten Browser das Bild mit einem farbigen Rand versehen. Selbst wenn Sie den obigen Code verwenden, um den Rahmen zu ändern, wird dieser durch den Link außer Kraft gesetzt, es sei denn, Sie entfernen oder ändern auch den Rahmen des Links. Verwenden Sie dazu eine untergeordnete CSS-Regel, um den Rahmen um verknüpfte Bilder zu entfernen oder zu ändern:

img {
Grenze: keine;
}

Sie können auch CSS verwenden, um die Höhe und Breite Ihrer Bilder zu ändern oder festzulegen. Die Verwendung des Browsers zum Anpassen der Bildgröße ist aufgrund der Download-Geschwindigkeit zwar keine gute Idee, die Größe der Bilder wird jedoch immer besser, damit sie immer noch gut aussehen. Und mit CSS können Sie festlegen, dass Ihre Bilder alle eine Standardbreite oder -höhe haben oder dass die Abmessungen relativ zum Container sind.

Denken Sie daran, wenn Sie die Größe von Bildern ändern, sollten Sie für optimale Ergebnisse nur eine Dimension ändern - die Höhe oder die Breite. Dadurch wird sichergestellt, dass das Bild sein Seitenverhältnis beibehält und nicht ungewöhnlich aussieht. Stellen Sie den anderen Wert auf

Automatisch oder lassen Sie es weg, um den Browser anzuweisen, das Seitenverhältnis konsistent zu halten. img {
Breite: 50%;
Höhe: Auto;
}

CSS3 bietet mit den neuen Eigenschaften eine Lösung für dieses Problem

Objektanpassung und Objektposition. Mit diesen Eigenschaften können Sie die genaue Höhe und Breite des Bildes sowie das Seitenverhältnis festlegen. Dies kann zu Letterboxing-Effekten um Ihre Bilder oder zum Zuschneiden führen, damit das Bild in die erforderliche Größe passt.

Während der CSS3

Die Eigenschaften Objektanpassung und Objektposition werden noch nicht allgemein unterstützt. Es gibt andere CSS3-Eigenschaften, die in den meisten modernen Browsern, die Sie zum Ändern Ihrer Bilder verwenden können, gut unterstützt werden. 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 halten oder darauf klicken oder kurz danach.

Verwenden von Bildern als Hintergrund

CSS macht es einfach, ausgefallene Hintergründe mit Ihren Bildern zu erstellen. Sie können der gesamten Seite oder nur einem bestimmten Element Hintergründe hinzufügen. Mit der können Sie ganz einfach ein Hintergrundbild auf der Seite erstellen

Hintergrundbildeigenschaft: body {
Hintergrundbild: URL (background.jpg);
}

Ändere das

Rumpfauswahl auf ein bestimmtes Element auf der Seite, um den Hintergrund auf nur ein Element zu setzen.

Ein weiterer Spaß, den Sie mit Bildern machen können, besteht darin, ein Hintergrundbild zu erstellen, das nicht mit dem Rest der Seite verschiebt - wie ein Wasserzeichen. Sie verwenden nur den Stil

Hintergrund-Anhang: behoben; zusammen mit Ihrem Hintergrundbild. Weitere Optionen für Ihre Hintergründe sind das horizontale oder vertikale Kacheln mit der Eigenschaft background-repeat. Hintergrundwiederholung schreiben: repeat-x; um das Bild horizontal zu kacheln und den Hintergrund zu wiederholen: repeat-y; vertikal kacheln. Und Sie können Ihr Hintergrundbild mit der Eigenschaft background-position positionieren.

Und CSS3 fügt noch mehr Stile für Ihre Hintergründe hinzu. Sie können Ihre Bilder auf eine beliebige Hintergrundgröße strecken oder das Hintergrundbild so einstellen, dass es mit der Fenstergröße skaliert. Sie können die Position ändern und dann das Hintergrundbild ausschneiden. Das Beste an CSS3 ist jedoch, dass Sie jetzt mehrere Hintergrundbilder überlagern können, um noch komplexere Effekte zu erzielen.

HTML5 hilft beim Stylen von Bildern

Das

Das FIGURE-Element in HTML5 sollte um alle Bilder platziert werden, die im Dokument einzeln stehen können. Eine Möglichkeit, darüber nachzudenken, besteht darin, dass sich das Bild, wenn es in einem Anhang erscheinen könnte, innerhalb des FIGURE-Elements befinden sollte. Sie können dieses Element und das FIGCAPTION-Element verwenden, um Ihren Bildern Stile hinzuzufügen.