CSS - Bilder

Hintergrundbilder

CSS bietet die Eigenschaft background-image, mit der Sie ein Bild als Hintergrund eines Elements festlegen können. Um ein Hintergrundbild zu verwenden, müssen Sie die URL der Bilddatei innerhalb der background-image-Eigenschaft angeben.

.element {
  background-image: url("path/to/image.jpg");
}

Sie können die Position des Hintergrundbildes mit der Eigenschaft background-position steuern. Sie akzeptiert Werte wie top, bottom, left, right, center oder spezifische Pixel- oder Prozentwerte. Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert.

.element {
  background-image: url("path/to/image.jpg");
  background-position: center center;
}

Wenn das Hintergrundbild kleiner ist als das Element, auf das es angewendet wird, wird es standardmäßig wiederholt, um das gesamte Element zu füllen. Sie können dieses Verhalten mit der Eigenschaft background-repeat steuern. Sie akzeptiert Werte wie repeat, repeat-x, repeat-y und no-repeat.

.element {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
}

CSS ermöglicht es Ihnen auch, mehrere Bilder für den Hintergrund eines Elements festzulegen. Sie können mehrere URLs, durch Kommas getrennt, innerhalb der background-image-Eigenschaft angeben. Jedes Bild wird übereinander gestapelt, wobei jedes folgende Bild unter seinem Vorgänger in der im CSS-Code angegebenen Reihenfolge liegt.

.element {
  background-image: url("image1.jpg"), url("image2.jpg");
  backgrounds-position: center center, top right;
  backgrounds-repeat: no-repeat, repeat;
}

In diesem Fall wird "image1.jpg" in der Mitte positioniert und nicht wiederholt, während "image2.jpg" in der oberen rechten Ecke positioniert wird und sich wiederholt.

Hintergrundbilder können das visuelle Interesse steigern und das Design Ihrer Webseiten verbessern, indem Sie Eigenschaften wie Platzierung, Wiederholung und Erscheinungsbild nutzen, die alle durch CSS-Stile gesteuert werden.

Bildränder

Mit CSS können Sie Ränder um Bilder hinzufügen und deren Aussehen steuern. Um einen Rand zu einem Bild hinzuzufügen, können Sie die Eigenschaft border oder deren einzelne Eigenschaften verwenden: border-width, border-style und border-color.

Um einen Rand für ein Bild festzulegen, können Sie die Kurzschreibweise border verwenden. Sie ermöglicht es Ihnen, Breite, Stil und Farbe in einer Zeile CSS-Code anzugeben. Die Syntax für die border-Eigenschaft lautet wie folgt:

img {
  border: 2px solid #000000;
}

Das Bild erhält einen 2 Pixel breiten, durchgezogenen schwarzen Rand.

Sie können den Stil mit der Eigenschaft border-style anpassen. Sie akzeptiert Werte wie solid, dashed, dotted und andere. Jeder Stil erzeugt ein anderes Aussehen für den Rand.

img {
  border-width: 3px;
  border-style: dashed;
  border-color: #ff0000;
}

Dieser Code gibt dem Bild einen 3 Pixel breiten, gestrichelten roten Rand.

Sie können auch verschiedene Farben und Breiten für jede Seite des Bildes mit einzelnen Eigenschaften festlegen: border-top, border-right, border-bottom und border-left. Mit diesen Eigenschaften können Sie Breite, Stil und Farbe für jede Seite angeben.

img {
  border-top: 2px solid #000000;
  border-right: 4px dotted #00ff00;
  border-bottom:6px double #0000ff;
  border-left: 8px ridge #ff00ff;
}

Jede Seite des Bildes hat einen anderen Stil, eine andere Breite und eine andere Farbe.

Ränder können eine einfache Möglichkeit sein, um Bilder auf Ihren Webseiten optisch ansprechender zu gestalten und abzugrenzen. Durch die Verwendung von CSS-Eigenschaften können Sie das Aussehen von Bildrändern an das Design und den Stil Ihrer Website anpassen.

Bildopazität

CSS bietet die opacity-Eigenschaft, mit der Sie die Transparenz eines Bildes anpassen können. Die opacity-Eigenschaft akzeptiert Werte zwischen 0 und 1, wobei 0 vollständig transparent und 1 vollständig undurchsichtig bedeutet.

img {
  opacity: 0.5;
}

Sie können die opacity-Eigenschaft mit anderen Bildstilen kombinieren, um visuelle Effekte zu erzeugen.

img {
  opacity: 0.7;
  border: 2px solid #000000;
  filter: grayscale(50%);
}

Die Anpassung der Bildopazität kann in verschiedenen Szenarien nützlich sein, wie zum Beispiel beim Erstellen von Overlays oder Überblendeffekten. Mit der opacity-Eigenschaft steuern Sie, wie transparent Bilder sind, und erstellen ansprechende Designs.

Wenn Sie Opazität auf ein Bild anwenden, beeinflusst dies alles, einschließlich Ränder oder Schatten. Wenn Sie die Transparenz nur auf den Inhalt anwenden möchten, während Ränder oder Schatten vollständig undurchsichtig bleiben, verwenden Sie stattdessen die rgba()-Funktion für Hintergrundfarben.

img {
    background-color: rgba(255,255,255,.5);
    border: 2px solid #000;
}

Bildfilter

CSS bietet die filter-Eigenschaft, mit der Sie verschiedene visuelle Effekte auf Bilder anwenden können. Mit der filter-Eigenschaft können Sie das Erscheinungsbild von Bildern ohne komplexe Bildbearbeitungssoftware manipulieren.

Ein beliebter Filtereffekt ist Graustufenumwandlung. Er entfernt die Farbe aus einem Bild und zeigt es in Graustufen an. Um einen Graustufenfilter anzuwenden, können Sie die Funktion grayscale() innerhalb der filter-Eigenschaft verwenden. Die Funktion akzeptiert einen Prozentwert, wobei 0% keinen Graustufeneffekt und 100% vollständige Graustufen bedeuten.

img {
  filter: grayscale(100%);
}

Ein weiterer häufig verwendeter Filter ist Unschärfe. Er weicht die Kanten und Details eines Bildes auf und erzeugt einen verschwommenen Effekt. Um einen Unschärfefilter anzuwenden, können Sie die Funktion blur() innerhalb der filter-Eigenschaft verwenden. Die Funktion akzeptiert einen Längenwert, typischerweise in Pixeln, der die Stärke der Unschärfe bestimmt.

img {
  filter: blur(5px);
}

Sie können auch die Helligkeit eines Bildes mit der Funktion brightness() anpassen. Sie akzeptiert einen Prozentwert, wobei 100% keine Änderung der Helligkeit bedeutet; Werte unter 100% machen es dunkler; Werte über 100% machen es heller.

img {
  filter: brightness(150%);
}

CSS bietet mehrere andere Filterfunktionen wie contrast(), hue-rotate(), invert() und mehr. Sie können sogar mehrere Filter kombinieren, indem Sie sie innerhalb der filter-Eigenschaft nacheinander auflisten.

img {
  filter: grayscale(50%) blur(2px) brightness(120%);
}

Bild-Sprites

Bild-Sprites kombinieren mehrere Bilder in einer Datei. Anstatt separate Dateien für jedes Element zu verwenden, nutzen Sie ein einzelnes Sprite-Bild und zeigen jeweils nur einen bestimmten Teil davon an.

Der Hauptvorteil liegt in der Reduzierung der HTTP-Anfragen einer Webseite. Beim Laden einer Seite erfordert jede Bilddatei eine separate Anfrage an den Server. Durch die Zusammenfassung mehrerer Bilder in einem minimieren Sie die Anzahl der Anfragen, was die Ladegeschwindigkeit und Leistung verbessern kann.

Um ein Bild-Sprite zu erstellen, verwenden Sie ein Bildbearbeitungsprogramm, um mehrere Bilder in einem Raster oder Layout innerhalb einer Datei anzuordnen. Jedes einzelne Bild im Sprite wird typischerweise ohne Abstand nebeneinander platziert.

Sobald Sie das Sprite-Bild fertig haben, verwenden Sie CSS, um bestimmte Teile des Bildes anzuzeigen. Setzen Sie das Sprite als Hintergrundbild eines Elements mit background-image. Dann nutzen Sie background-position, um die Koordinaten des gewünschten Teils innerhalb des Sprites anzugeben.

.icon {
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.icon-home {
  background-position: 0 0;
}

.icon-settings {
  background-position: -20px 0;
}

.icon-profile {
  background-position: -40px 0;
}

In diesem Beispiel enthält "sprite.png" mehrere Icons. Jedes Icon ist 20x20 Pixel groß. Das CSS setzt dies als Hintergrund für Elemente mit der Klasse "icon". Die einzelnen Icons werden durch Anpassung von background-position angezeigt. Der erste Wert stellt die horizontale Position dar; der zweite Wert die vertikale Position. Negative Werte verschieben es nach links oder nach oben.

Für eine gute Nutzung von Sprites planen Sie das Layout und die Abmessungen der einzelnen Bilder darin sorgfältig. Beachten Sie auch die Größe; große Sprites können die gesamte Dateigröße beeinflussen.

Sprites werden häufig für Icons, Buttons und andere kleine grafische Elemente verwendet, die auf Websites oft vorkommen. Durch die Implementierung von Sprites können Sie Ihre Seiten optimieren, indem Sie Anfragen reduzieren und die Ladeleistung verbessern.

Responsive Bilder

Es ist wichtig, Bilder responsiv zu gestalten, damit sie sich gut an verschiedene Viewport-Größen anpassen. CSS bietet Techniken, um Bilder responsiv zu machen und ihre Darstellung auf verschiedenen Geräten zu optimieren.

Eine Möglichkeit, Bilder responsiv zu gestalten, ist die Verwendung der max-width-Eigenschaft. Durch das Setzen von max-width: 100%; wird ein Bild proportional verkleinert, wenn sein Container kleiner als die Originalgröße des Bildes ist. Es wird jedoch nicht über seine ursprünglichen Abmessungen hinaus vergrößert, wodurch ein Qualitätsverlust verhindert wird.

img {
  max-width: 100%;
  height: auto;
}

Wenn Sie max-width: 100%; festlegen, ist es auch ratsam, height: auto; zu setzen. Dies stellt sicher, dass sich die Höhe des Bildes automatisch proportional zur Breite anpasst und das Seitenverhältnis bewahrt wird. Ohne height: auto; könnte das Bild beim Skalieren gestreckt oder verzerrt erscheinen.

Eine weitere Technik für responsive Bilder ist das Bereitstellen verschiedener Versionen eines Bildes je nach Gerät oder Bildschirmgröße. Dies ermöglicht es Ihnen, Bildqualität und Dateigröße für verschiedene Szenarien zu optimieren.

CSS-Medienabfragen ermöglichen es Ihnen, verschiedene Stile basierend auf Eigenschaften des Geräts, wie der Bildschirmbreite, anzuwenden. Sie können Breakpoints definieren, an denen verschiedene Stile oder verschiedene Bilder verwendet werden sollen.

/* Standardbild */
.image {
  background-image: url("small-image.jpg");
}

/* Medienabfrage für größere Bildschirme */
@media screen and (min-width: 768px) {
  .image {
    background-image: url("large-image.jpg");
  }
}

Durch die Verwendung von Medienabfragen können Sie verschiedene Bildquellen für unterschiedliche Bildschirmgrößen festlegen. Dies ermöglicht es Ihnen, kleinere, optimierte Bilder für mobile Geräte und hochwertigere Bilder für größere Bildschirme bereitzustellen. Diese Technik trägt dazu bei, die Ladezeiten der Seite zu verbessern und die Bandbreitennutzung zu optimieren.

Bei der Implementierung responsiver Bilder sollten Sie Faktoren wie den Zweck des Bildes, die erwarteten Bildschirmgrößen Ihrer Zielgeräte und den Kompromiss zwischen Qualität und Dateigröße berücksichtigen. Das Testen Ihrer Implementierung auf verschiedenen Geräten und Bildschirmgrößen hilft, ein Gleichgewicht zu finden, das eine gute Benutzererfahrung bietet.

Responsive Bilder sind ein wichtiger Teil des modernen Webdesigns. Durch die Verwendung von CSS-Techniken wie max-width und Medienabfragen können Sie Ihre Bilder gut an verschiedene Geräte und Bildschirmgrößen anpassen.

Bildhover-Effekte

Mit CSS können Sie Hover-Effekte auf Bildern erstellen, die Ihren Webseiten Interaktivität und visuelle Attraktivität verleihen. Hover-Effekte werden ausgelöst, wenn ein Benutzer den Mauszeiger über ein Bild bewegt. Sie bieten eine Möglichkeit, zusätzliche Informationen hervorzuheben oder anzuzeigen.

Ein häufiger Hover-Effekt ist die Änderung der Deckkraft eines Bildes. Durch die Verwendung der Pseudo-Klasse :hover und der Eigenschaft opacity können Sie ein Bild beim Überfahren mit der Maus transparenter oder undurchsichtiger machen.

img {
  opacity: 0.8;
  transition: opacity 0.3s;
}

img:hover {
  opacity: 1;
}

Ein weiterer beliebter Hover-Effekt ist die Skalierung des Bildes. Sie können die Eigenschaft transform mit der Funktion scale() verwenden, um das Bild beim Überfahren mit der Maus zu vergrößern oder zu verkleinern.

img {
  transition: transform 0.3s;
}

img:hover {
  transform: scale(1.1);
}

Sie können auch den Rahmen eines Bildes beim Hover ändern. Durch die Verwendung der Pseudo-Klasse :hover und der Rahmeneigenschaften können Sie den Stil, die Farbe oder die Breite des Rahmens ändern, wenn der Mauszeiger über dem Bild schwebt.

img {
  border: 2px solid #000;
  transition: border-color 0.3s; 
}

img:hover {
  border-color: #ff0000;
}

Um Hover-Effekte optisch ansprechender zu gestalten, können Sie sie mit Übergängen kombinieren. Übergänge ermöglichen es Ihnen, Änderungen zwischen dem normalen und dem Hover-Zustand sanft zu animieren. Verwenden Sie die Eigenschaft 'transition', um Eigenschaften, Dauer und Zeitfunktion festzulegen.

img {
  opacity: 0.8;
  transition: 0.3s all ease-in-out;
}

img:hover {
  transform: scale(1.1);
}

Durch den Einsatz dieser Techniken schaffen Sie interaktive Erlebnisse für Benutzer. Experimentieren Sie mit verschiedenen Werten, um den gewünschten visuellen Effekt zu erzielen, der Ihr Website-Design ergänzt. Denken Sie an die Barrierefreiheit. Manche Benutzer haben möglicherweise Schwierigkeiten mit der präzisen Maussteuerung. Stellen Sie daher sicher, dass wichtige Informationen und Funktionen auch ohne ausschließliche Abhängigkeit von Interaktionen zugänglich sind.

Bildergalerien

Mit CSS können Sie Bildergalerien auf Ihren Webseiten erstellen. Bildergalerien sind eine Möglichkeit, eine Sammlung von Bildern auf organisierte und interaktive Weise zu präsentieren.

Um eine Bildergalerie mit CSS zu erstellen, beginnen Sie mit der Strukturierung Ihres HTML-Markups. Fügen Sie ein Container-Element ein, das die einzelnen Galerie-Elemente enthält. Jedes Galerie-Element besteht typischerweise aus einem Bildvorschau und optional einer Bildunterschrift oder einem Overlay.

<div class="gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Bild 1">
    <div class="caption">Bildunterschrift für Bild 1</div>
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Bild 2">
    <div class="caption">Bildunterschrift für Bild 2</div>
  </div>
</div>

Nachdem die HTML-Struktur erstellt ist, verwenden Sie CSS, um die Galerie und ihre Komponenten zu gestalten. Beginnen Sie mit der Anwendung von Stilen auf den Galerie-Container, wie zum Beispiel die Einrichtung eines Grid- oder Flex-Layouts zur Anordnung der Galerie-Elemente.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

Dieser CSS-Code legt fest, dass der Galerie-Container ein Grid-Layout mit responsiven Spaltengrößen verwendet, die sich an den verfügbaren Platz anpassen.

Als Nächstes gestalten Sie die einzelnen Galerie-Elemente. Sie können Ränder, Innenabstände oder Hintergrundfarben anwenden, um eindeutige Vorschaubilder zu erstellen. Verwenden Sie CSS, um die Größe und das Seitenverhältnis der Vorschaubilder zu kontrollieren.

.gallery-item {
  border: 1px solid #ccc;
  padding: 5px;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
}

Die Galerie-Elemente haben einen Rand und einen Innenabstand; Bilder innerhalb dieser Elemente skalieren responsiv und behalten dabei ihr Seitenverhältnis bei.

Um Interaktivität hinzuzufügen, können Sie eine Lightbox-Funktion implementieren. Eine Lightbox ist ein Overlay, das erscheint, wenn Sie auf ein Vorschaubild klicken; es zeigt eine größere Version des Bildes zusammen mit Navigationselementen an.

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0;
}

Die Lightbox ist anfänglich ausgeblendet und fest positioniert, wobei sie den gesamten Viewport abdeckt. Wenn sie aktiviert wird, zeigt sie ein größeres Bild zentriert auf dem Bildschirm mit einem halbtransparenten Hintergrund an.

Um die Lightbox zu steuern, fügen Sie Navigationsschaltflächen mit HTML-Elementen hinzu, die mit CSS gestaltet werden.

<div class="lightbox">  
  <img src="large-image.jpg" alt="Großes Bild">  
  <div class="navigation">   
    <button class="prev">Vorheriges</button>   
    <button class="next">Nächstes</button>    
  </div>    
</div>    

Sie können Bildunterschriften oder Overlays hinzufügen, die zusätzliche Informationen zu jedem Bild liefern, indem Sie CSS-Positionierung verwenden.

.gallery-item .caption {
  margin-top: 5px;
  font-size: 14px;
  color: #888;
}     

Bildunterschriften werden unter den Vorschaubildern positioniert und mit einer kleineren Schriftgröße und einer anderen Farbe gestaltet.

CSS-Formen mit Bildern

CSS bietet Eigenschaften, mit denen Sie nicht-rechteckige Formen mit Bildern erstellen können, um Ihren Webseiten visuelles Interesse zu verleihen. Zwei wichtige Eigenschaften zum Erstellen von Formen sind clip-path und shape-outside.

Die Eigenschaft clip-path ermöglicht es Ihnen, ein Bild in eine bestimmte Form zu beschneiden. Sie können grundlegende Formen wie Kreise, Ellipsen, Polygone oder sogar benutzerdefinierte SVG-Pfade verwenden, um komplexe Formen zu erstellen. Der Teil des Bildes innerhalb der angegebenen Form bleibt sichtbar, während der Rest ausgeschnitten wird.

img {
  clip-path: circle(50% at 50% 50%);
}

Die Eigenschaft shape-outside wird in Kombination mit Floats verwendet. Sie definiert eine Form, um die sich der Inhalt wickeln soll. Durch Anwendung von shape-outside auf ein schwebendes Bild können Sie den umgebenden Text um die Konturen des Bildes fließen lassen.

img {
  float: left;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

Sie können clip-path und shape-outside kombinieren, um Bilder mit benutzerdefinierten Formen zu erstellen, die mit dem umgebenden Inhalt interagieren.

img {
  float: left;
  clip-path: ellipse(60% at center);
  shape-outside: ellipse(60% at center);
}

Bei der Verwendung von CSS-Formen mit Bildern können Sie die visuelle Attraktivität weiter verbessern, indem Sie sie mit anderen Stilen wie Rändern, Schatten, Filtern oder Hover-Effekten auf geformten Bildern kombinieren.

img {
  clip-path: polygon(50% top-left-corner%, right-center-corner%, bottom-center-corner%, left-center-corner%);
  transition: clip-path .3s;
  filter: grayscale();
}

img:hover {
  clip-path: rectangle();
  filter: grayscale-off();
}