CSS - Hintergründe

Hintergrund-Eigenschaften

background-color: red;

background-color: rgb(255, 0, 0);

background-color: #ff0000;

background-color: hsl(0, 100%, 50%);

background-color: rgba(255, 0, 0, 0.5);

background-image: url('image.jpg');

background-image: url('image1.jpg'), url('image2.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-position: top right;

background-position: 50% 50%;

background-position: 100px 200px;

background-size: 200px 300px;

background-size: 50% 50%;

background-origin: border-box;

background-clip: padding-box;

Kurzschreibweise der Background-Eigenschaft

Mit der Kurzschreibweise der background-Eigenschaft können Sie mehrere Hintergrund-Eigenschaften in einer Deklaration festlegen. Dies kann Ihren CSS-Code kürzer und leichter lesbar machen.

Die Reihenfolge der Werte in der Kurzschreibweise ist:

background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> / <background-size>;

Sie können diese Hintergrund-Eigenschaften kombinieren:

background-color: #ff0000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

In eine einzige Kurzschreibweise:

background: #ff0000 url('image.jpg') no-repeat fixed center / cover;

Beachten Sie, dass der Wert für background-size durch einen Schrägstrich (/) vom Wert für background-position getrennt wird.

Bei Verwendung der Kurzschreibweise werden alle ausgelassenen Werte auf ihre Standardwerte gesetzt. Wenn Sie alle Hintergrund-Eigenschaften explizit festlegen möchten, fügen Sie alle notwendigen Werte in die Kurzschreibweise ein.

Die Verwendung der background-Kurzschreibweise kann Ihren CSS-Code vereinfachen und leichter wartbar machen. Wenn Sie jedoch nur eine oder zwei Hintergrund-Eigenschaften festlegen müssen, kann es besser lesbar sein, einzelne Eigenschaften anstelle der Kurzschreibweise zu verwenden.

Mehrere Hintergründe

Mit CSS können Sie mehrere Hintergrundbilder auf einem einzelnen Element übereinander legen. Diese Technik ermöglicht interessante visuelle Effekte und verleiht Ihren Designs mehr Tiefe.

Um mehrere Hintergrundbilder festzulegen, können Sie eine durch Kommas getrennte Liste von Hintergrundbildwerten in der Eigenschaft background-image oder der Kurzschreibweise background verwenden.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
}

Sie können auch mehrere Hintergrundbilder mit anderen Eigenschaften kombinieren. Bei Verwendung der Kurzschreibweise background werden die Werte für jede Ebene durch Kommas getrennt.

.element {
  background: url('image1.jpg') no-repeat center, 
              url('image2.jpg') repeat-x top;
}

Sie können auch unterschiedliche Größen, Positionen und andere Eigenschaften für jede Ebene angeben.

.element {
  background: url('image1.jpg') no-repeat center/cover,
              url('image2.jpg') repeat-x top/50% auto;
}

Bei der Verwendung mehrerer Hintergründe liegt das zuerst angegebene Bild oben. Nachfolgende Bilder werden in der Reihenfolge ihrer Deklaration darunter geschichtet.

Mehrere Hintergründe bieten Ihnen Möglichkeiten, visuell ansprechende Designs mit CSS zu erstellen. Experimentieren Sie mit verschiedenen Kombinationen von Bildern, Positionen, Größen und anderen Eigenschaften, um Ihre gewünschten Effekte zu erzielen.

Hintergrund-Farbverläufe

Mit CSS können Sie Farbübergänge, sogenannte Farbverläufe, für Hintergründe erstellen. Sie können lineare oder radiale Farbverläufe ohne Bilddateien erzeugen, was zu schnelleren Ladezeiten führt.

Um einen linearen Farbverlauf zu erstellen, verwenden Sie die Funktion linear-gradient() als Wert für die Eigenschaft background oder background-image. Geben Sie die Richtung des Farbverlaufs und die Farben an, zwischen denen der Übergang stattfinden soll.

.element {
  background: linear-gradient(to right, red, blue);
}

Dies erzeugt einen Farbverlauf, der von links rot nach rechts blau übergeht. Sie können die Richtung mit Schlüsselwörtern wie to top, to bottom, to left, to right oder einem Winkel in Grad angeben.

Farbstopps steuern, wo jeder Farbübergang stattfindet. Standardmäßig sind die Übergänge gleichmäßig verteilt, aber Sie können Prozentsätze oder Längen angeben, um deren Positionen zu steuern.

.element {
  background: linear-gradient(to right, red 0%, blue 50%, green 100%);
}

Um einen radialen Farbverlauf zu erstellen, verwenden Sie die Funktion radial-gradient(). Geben Sie die Mittelposition, Form (Kreis oder Ellipse) und Farbstopps an.

.element {
  background: radial-gradient(circle at center, red, blue);
}

Dies erzeugt einen kreisförmigen Farbverlauf, der im Element zentriert ist und von rot in der Mitte zu blau an den Rändern übergeht.

Sie können komplexere Farbverläufe erstellen, indem Sie mehrere Farbstopps angeben und Transparenz verwenden.

.element {
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}

Farbverläufe können mit anderen Hintergrundeigenschaften wie background-size und background-repeat kombiniert werden, um verschiedene Effekte zu erzielen.

.element { 
  background: repeating-linear-gradient(45deg, red, blue 10%);
} 

CSS-Farbverläufe bieten eine Möglichkeit, ansprechende Hintergründe zu erstellen, ohne auf Bilddateien angewiesen zu sein. Experimentieren Sie mit verschiedenen Farben, Richtungen und Farbstopps, um Ihre gewünschten Effekte zu erzielen.

Hintergrundvermischung

Die CSS-Eigenschaft background-blend-mode ermöglicht die Vermischung von Hintergrundbildern und -farben innerhalb eines Elements. Dies erzeugt visuelle Effekte, indem mehrere Hintergründe mit verschiedenen Mischmodi kombiniert werden.

Die verfügbaren Mischmodi sind:

• normal: Der Standardmodus; keine Vermischung wird angewendet.
• multiply: Multipliziert die Hintergrundfarbe mit dem Bild, was zu einem dunkleren Effekt führt.
• screen: Multipliziert das Inverse der Hintergrundfarbe mit dem Bild, was zu einem helleren Effekt führt.
• overlay: Wendet eine Kombination aus multiply und screen basierend auf der Hintergrundfarbe an.
• darken: Wählt die dunkleren Farbwerte aus dem Bild und der Hintergrundfarbe aus.
• lighten: Wählt die helleren Farbwerte aus dem Bild und der Hintergrundfarbe aus.

Weitere Mischmodi sind: color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, und luminosity.

Um Hintergrundvermischung zu verwenden, wenden Sie mehrere Hintergründe auf ein Element an und geben dann den gewünschten Mischmodus mit der Eigenschaft an.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-blend-mode: multiply;
}

Sie können auch Bilder mit Farben mischen.

.element {
  background: url('image.jpg'), #ff0000;
  background-blend-mode: screen;
}

Wenn Sie mehrere Hintergründe haben, können Sie für jede Ebene mehrere Modi angeben.

.element {
  background: url('image1.jpg'), url('image2.jpg'), #ff0000;
  background-blend-mode: multiply, overlay;
}

Hintergrundvermischung eröffnet viele kreative Möglichkeiten zur Kombination von Bildern und Farben. Experimentieren hilft dabei, die gewünschten Effekte zu erzielen.

Hintergrund-Deckkraft

Die Deckkraft von Hintergrundfarben und -bildern in CSS kann mit der Eigenschaft opacity oder durch die Verwendung von RGBA- oder HSLA-Farbwerten gesteuert werden.

Die opacity-Eigenschaft legt die Gesamtdeckkraft eines Elements fest, einschließlich seines Inhalts und Hintergrunds. Sie nimmt einen Wert zwischen 0 (vollständig transparent) und 1 (vollständig deckend) an.

.element {
  background-color: #ff0000;
  opacity: 0.5;
}

Die Verwendung der opacity-Eigenschaft wirkt sich jedoch auf das gesamte Element aus, einschließlich seines Inhalts. Wenn Sie nur die Deckkraft der Hintergrundfarbe oder des Hintergrundbildes steuern möchten, ohne den Inhalt zu beeinflussen, können Sie RGBA- oder HSLA-Farbwerte verwenden.

RGBA steht für Rot, Grün, Blau, Alpha; wobei Alpha die Deckkraft darstellt. HSLA steht für Farbton, Sättigung, Helligkeit, Alpha; wobei Alpha denselben Zweck erfüllt.

.element {
  background-color: rgba(255, 0, 0, 0.5);
}

Sie können RGBA- oder HSLA-Farbwerte auch mit Hintergrundbildern verwenden.

.element {
  background-image: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), 
                    url('image.jpg');
}

Die Verwendung von RGBA oder HSLA ermöglicht es Ihnen, die Transparenz unabhängig vom Inhalt zu steuern und bietet Flexibilität bei der Erstellung visuell interessanter Designs.

Hintergrundmuster

Hintergrundmuster fügen Ihren Webseiten Textur und visuelles Interesse hinzu. Sie können wiederholende Hintergrundmuster mit kleinen Bildern und CSS-Techniken für nahtlose Wiederholung erstellen.

Um ein sich wiederholendes Hintergrundmuster zu erstellen, wählen oder erstellen Sie zunächst ein kleines Bild, das nahtlos gekachelt werden kann. Das Bild sollte Kanten haben, die beim horizontalen und vertikalen Wiederholen zusammenpassen.

.element {
  background-image: url('pattern.png');
  background-repeat: repeat;
}

.element {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
}

.element {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
                    url('pattern.png');
  background-repeat: repeat;
}

Responsive Hintergrundbilder

Responsives Webdesign bietet optimale Nutzererfahrungen auf allen Geräten. Die Verwendung von responsiven Hintergrundbildern bedeutet, passende Bildgrößen und Auflösungen basierend auf der Bildschirmgröße des Betrachters bereitzustellen.

Eine Technik ist das Bereitstellen verschiedener Bilddateien je nach Bildschirmgröße des Geräts. Sie können mehrere background-image-Eigenschaften mithilfe von Media Queries definieren.

.element {
  background-image: url('small-image.jpg');
}

@media (min-width: 768px) {
  .element {
    background-image: url('medium-image.jpg');
  }
}

@media (min-width: 1200px) {
  .element {
  background-image: url('large-image.jpg');
  }
}

.element {
  background-image: image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x
  );
}

.element {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
}

.element {
  background-image: url('pattern.svg');
}