CSS
Hintergründe

Einführung

Syntax

• Hintergrundfarbe: Farbe | transparent | initial | erben;
• Hintergrundbild: URL | Keine | initial | erben;
• Hintergrundposition: Wert;
• Hintergrundgröße: <bg-size> [<bg-size>]
• <bg-size>: auto | Länge | Abdeckung | enthalten | initial | erben;
• Hintergrundwiederholung: Wiederholung | Wiederholung-x | wiederholen-y | keine Wiederholung | initial | erben;
• Hintergrundursprung: Polsterbox | Randfeld | Inhaltsfeld | initial | erben;
• Hintergrund-Clip: Border-Box | Polsterbox | Inhaltsfeld | initial | erben;
• Hintergrundanhang: scrollen | fixiert | lokal | initial | erben;
• Hintergrund: bg-color bg-Bildposition / bg-Größe bg-Wiederholung bg-ursprung bg-clip bg-anhang initial | erben;

Bemerkungen

Hintergrundfarbe

Die background-color Eigenschaft setzt die Hintergrundfarbe eines Elements eines Farbwertes oder durch Schlüsselwörter, wie die Verwendung von transparent , inherit oder initial .

• transparent : Gibt an, dass die Hintergrundfarbe transparent sein soll. Dies ist die Standardeinstellung.

• erben , erbt diese Eigenschaft von ihrem übergeordneten Element.

• initial setzt diese Eigenschaft auf ihren Standardwert.

Dies kann auf alle Elemente und ::first-letter / ::first-line Pseudo-Elemente angewendet werden .

Farben in CSS können mit verschiedenen Methoden angegeben werden .

Farbnamen

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• Das oben verwendete Beispiel ist eine von mehreren Möglichkeiten, wie CSS eine einzelne Farbe darstellen muss.

Hex-Farbcodes

Der Hex-Code wird verwendet, um RGB-Komponenten einer Farbe in der Hexadezimal-Notation 16 anzugeben. # ff0000 ist beispielsweise hellrot, wobei der Rotanteil der Farbe 256 Bit (ff) beträgt und der entsprechende Grün- und Blauanteil der Farbe 0 (00) ist.

Wenn beide Werte in jeder der drei RGB-Paarungen (R, G und B) gleich sind, kann der Farbcode auf drei Zeichen verkürzt werden (die erste Ziffer jeder Paarung). #ff0000 kann auf #f00 und #ffffff auf #fff verkürzt #fff .

Die Hex-Schreibweise unterscheidet nicht zwischen Groß- und Kleinschreibung.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Eine andere Möglichkeit, eine Farbe zu deklarieren, ist die Verwendung von RGB oder RGBa.

RGB steht für Rot, Grün und Blau und erfordert drei separate Werte zwischen 0 und 255 (in Klammern gesetzt), die den Dezimalfarbwerten für Rot, Grün und Blau entsprechen.

Mit RGBa können Sie einen zusätzlichen Alpha-Parameter zwischen 0,0 und 1,0 hinzufügen, um die Deckkraft zu definieren.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Eine andere Möglichkeit, eine Farbe zu deklarieren, ist die Verwendung von HSL oder HSLa und ähnelt RGB und RGBa.

HSL steht für Farbton, Sättigung und Helligkeit und wird häufig auch als HLS bezeichnet:

• Der Farbton ist ein Grad des Farbkreises (von 0 bis 360).
• Die Sättigung beträgt einen Prozentsatz zwischen 0% und 100%.
• Die Helligkeit ist auch ein Prozentsatz zwischen 0% und 100%.

Mit HSLa können Sie einen zusätzlichen Alpha-Parameter zwischen 0,0 und 1,0 hinzufügen, um die Deckkraft zu definieren.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interaktion mit Hintergrundbild

Die folgenden Aussagen sind alle gleichwertig:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

Sie alle führen dazu, dass die rote Farbe unter dem Bild angezeigt wird, wenn die Bildteile transparent sind oder das Bild nicht angezeigt wird (möglicherweise als Folge einer background-repeat ).

Beachten Sie, dass Folgendes nicht gleichwertig ist:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Hier setzt der Wert des background Ihr background-image außer Kraft.

Weitere Informationen zur background finden Sie unter Background Shorthand

Hintergrundbild

Die background-image Eigenschaft wird verwendet, um ein Hintergrundbild anzugeben, das auf alle übereinstimmenden Elemente angewendet werden soll. Standardmäßig ist dieses Bild so angeordnet, dass es das gesamte Element mit Ausnahme des Randes abdeckt.

.myClass {
  background-image: url('/path/to/image.jpg');
}

Um mehrere Bilder als background-image , definieren Sie eine durch Kommas getrennte url()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

Die Bilder werden entsprechend ihrer Reihenfolge gestapelt, wobei sich das erste deklarierte Bild auf den anderen befindet und so weiter.

Mehr CSS für Hintergrundbild

Diese folgenden Attribute sind sehr nützlich und auch fast unverzichtbar.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

Hintergrundsteigungen

Farbverläufe sind neue Bildtypen, die in CSS3 hinzugefügt werden. Als Bild werden Farbverläufe mit der background-image Eigenschaft oder der background Abkürzung festgelegt.

Es gibt zwei Arten von Gradientenfunktionen, linear und radial. Jeder Typ hat eine sich nicht wiederholende Variante und eine sich wiederholende Variante:

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

linearer Gradient ()

Ein linear-gradient hat die folgende Syntax

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

Dies erzeugt beispielsweise einen linearen Farbverlauf, der von rechts beginnt und von Rot nach Blau übergeht

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Sie können einen diagonal erstellen, indem Sie sowohl eine horizontale als auch eine vertikale Startposition angeben.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

Sie können eine beliebige Anzahl von Farbstopps in einem Verlauf angeben, indem Sie sie durch Kommas voneinander trennen. In den folgenden Beispielen wird ein Verlauf mit 8 Farbstopps erstellt

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

Radialgradient ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

Farbverläufe wiederholen

Wiederholende Verlaufsfunktionen verwenden dieselben Argumente wie die obigen Beispiele, kippen den Verlauf jedoch über den Hintergrund des Elements.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

Beachten Sie, dass die Farbcodes HEX, RGB, RGBa, HSL und HSLa anstelle von Farbnamen verwendet werden können. Zur Veranschaulichung wurden Farbnamen verwendet. Beachten Sie auch, dass die Radialgradientensyntax viel komplexer ist als der Lineargradient. Hier wird eine vereinfachte Version gezeigt. Eine vollständige Erklärung und Spezifikationen finden Sie in den MDN-Dokumenten

Hintergrund-Kürzel

Die background Eigenschaft kann verwendet werden, um eine oder mehrere hintergrundbezogene Eigenschaften festzulegen:

Die Reihenfolge der Werte spielt keine Rolle und jeder Wert ist optional

Syntax

Die Syntax der Hintergrund-Abkürzungsdeklaration lautet:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

Beispiele

background: red;

Einfach eine background-color mit dem red Wert einstellen.

background: border-box red;

Einen background-clip auf ein Rahmenfeld und eine background-color auf Rot setzen.

background: no-repeat center url("somepng.jpg");

Stellt eine background-repeat auf Nicht wiederholen, einen background-origin auf Mitte und ein background-image auf ein Bild ein.

background: url('pattern.png') green;

In diesem Beispiel wird die background-color des Elements mit pattern.png auf green pattern.png , sofern verfügbar, überlagert und so oft wiederholt, bis das Element gefüllt ist. Wenn pattern.png Transparenz enthält, wird die green Farbe dahinter sichtbar.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

In diesem Beispiel haben wir einen schwarzen Hintergrund mit einem Bild 'picture.png' oben, das Bild wiederholt sich in keiner der Achsen und befindet sich in der oberen linken Ecke. Das / hinter der Position soll die Größe des Hintergrundbildes enthalten können, das in diesem Fall auf 600px Breite und Auto für die Höhe eingestellt ist. Dieses Beispiel könnte gut mit einem Funktionsbild funktionieren, das zu einer Volltonfarbe überblenden kann.

HINWEIS: Die Verwendung der Kurzschreibe-Hintergrundeigenschaft setzt alle zuvor festgelegten Hintergrundeigenschaftswerte zurück, auch wenn kein Wert angegeben wird. Wenn Sie nur einen zuvor festgelegten Hintergrundeigenschaftswert ändern möchten, verwenden Sie stattdessen eine Langzeiteigenschaft.

Hintergrundposition

Mit background-position Eigenschaft " background-position wird die Startposition für ein Hintergrundbild oder einen Farbverlauf festgelegt

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

Die Position wird mit einer X- und Y -Koordinate festgelegt und mit einer der in CSS verwendeten Einheiten festgelegt.

CSS-Einheiten können mit verschiedenen Methoden angegeben werden (siehe hier ).

Langhändige Hintergrundpositionseigenschaften

Neben der Abkürzungseigenschaft oben können Sie auch die Hintergrundeigenschaften long- background-position-x und background-position-y . Damit können Sie die x- oder y-Positionen separat steuern.

HINWEIS: Dies wird in allen Browsern mit Ausnahme von Firefox (Versionen 31-48) 2 unterstützt . Firefox 49, der im September 2016 veröffentlicht wird , wird diese Eigenschaften unterstützen. Bis dahin gibt es einen Firefox-Hack in dieser Stack Overflow-Antwort.

Hintergrundbefestigung

Die Eigenschaft Hintergrundanhang legt fest, ob ein Hintergrundbild fixiert ist, oder scrollt mit dem Rest der Seite.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

Beispiele

Hintergrundanhang: scrollen

Das Standardverhalten, wenn der Körper gescrollt wird, rollt der Hintergrund mit:

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

Hintergrundbefestigung: behoben

Das Hintergrundbild wird fixiert und bewegt sich nicht, wenn der Körper gescrollt wird:

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

Hintergrundanhang: lokal

Das Hintergrundbild des div wird gescrollt, wenn der Inhalt des divs gescrollt wird.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

Hintergrund Wiederholung

Die Background-Repeat-Eigenschaft legt fest, ob / wie ein Hintergrundbild wiederholt wird.

Standardmäßig wird ein Hintergrundbild sowohl vertikal als auch horizontal wiederholt.

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

Eine background-repeat: repeat-y sieht folgendermaßen aus:

Hintergrundfarbe mit Deckkraft

Wenn Sie für ein Element opacity festlegen, wirkt sich dies auf alle untergeordneten Elemente aus. Um eine Deckkraft nur auf dem Hintergrund eines Elements festzulegen, müssen Sie RGBA-Farben verwenden. Das folgende Beispiel hat einen schwarzen Hintergrund mit einer Deckkraft von 0,6.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Mehrere Hintergrundbilder

In CSS3 können wir mehrere Hintergrund in demselben Element stapeln.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

Die Bilder werden übereinander gestapelt, wobei der erste Hintergrund oben und der letzte Hintergrund hinten liegt. img_1 wird oben img_2 , img_2 und img_3 sind unten.

Wir können dazu auch die Abkürzungseigenschaft für den Hintergrund verwenden:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

Wir können auch Bilder und Farbverläufe stapeln:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• Demo

Die Hintergrundursprungseigenschaft

Die Hintergrundursprungseigenschaft gibt an, wo das Hintergrundbild positioniert wird.

Hinweis: Wenn für die background-attachment fixed , hat diese Eigenschaft keine Auswirkungen.

Standardwert: padding-box

Mögliche Werte:

• padding-box - Die Position ist relativ zur Polsterbox
• border-box - Die Position ist relativ zum Rahmen
• content-box - Die Position ist relativ zum Inhaltsfeld
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Ergebnis:

Mehr:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Hintergrundclip

Definition und Verwendung: Die background-clip Eigenschaft gibt den Malbereich des Hintergrunds an.

Standardwert: border-box

Werte

• border-box ist der Standardwert. Dadurch kann sich der Hintergrund bis zur Außenkante des Elementrahmens erstrecken.
• padding-box schneidet den Hintergrund an der Außenkante der Auffüllung des Elements und lässt ihn nicht in den Rand hineinragen;
• content-box schneidet den Hintergrund am Rand der Inhaltsbox.
• inherit wendet die Einstellung des übergeordneten Elements auf das ausgewählte Element an.

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Hintergrundgröße

Gesamtübersicht

Die background-size Eigenschaft ermöglicht es , die Skalierung des steuern background-image . Es werden bis zu zwei Werte benötigt, die den Maßstab / die Größe des resultierenden Bildes in vertikaler und horizontaler Richtung bestimmen. Wenn die Eigenschaft fehlt, gilt ihre width und height als auto .

auto behält das Bildseitenverhältnis des Bildes bei, wenn es bestimmt werden kann. Die Höhe ist optional und kann als auto . Daher würden bei einem Bild mit 256 x 256 Pixeln alle folgenden Einstellungen für die background-size einem Bild mit einer Höhe und Breite von 50 px führen:

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

Wenn wir also mit dem folgenden Bild beginnen (welches die erwähnte Größe von 256 px × 256 px hat),

Auf dem Bildschirm des Benutzers werden am Ende des Elements 50 x 50 x 50 Pixel angezeigt, die im Hintergrund unseres Elements enthalten sind:

Man kann auch Prozentwerte verwenden, um das Bild in Bezug auf das Element zu skalieren. Das folgende Beispiel würde ein gezeichnetes Bild mit 200 x 133 x 133 Pixel ergeben:

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

Das Verhalten hängt vom background-origin .

Das Seitenverhältnis beibehalten

Das letzte Beispiel im vorherigen Abschnitt hat sein ursprüngliches Seitenverhältnis verloren. Der Kreis wurde zu einer Ellipse, das Quadrat zu einem Rechteck, das Dreieck zu einem anderen Dreieck.

Der Längen- oder Prozentwertansatz ist nicht flexibel genug, um das Seitenverhältnis zu jeder Zeit beizubehalten. auto hilft nicht, da Sie möglicherweise nicht wissen, welche Dimension Ihres Elements größer ist. Jedoch können bestimmte Bereiche ein Bild zu bedecken (und das Verhältnis richtigen Seiten) vollständig oder ein Bild mit dem richtigen Seitenverhältnis vollständig in einem Hintergrundbereich zu enthalten, wobei die Werte, contain und cover die zusätzliche Funktionalität bereitzustellen.

Eggsplanation für contain und cover

Entschuldigung für das schlechte Wortspiel, aber wir werden ein Bild des Tages von Biswarup Ganguly zur Demonstration verwenden. Nehmen wir an, dies ist Ihr Bildschirm und der graue Bereich befindet sich außerhalb Ihres sichtbaren Bildschirms. Zur Demonstration gehen wir von einem 16 × 9-Verhältnis aus.

Wir möchten das oben genannte Bild des Tages als Hintergrund verwenden. Aus irgendeinem Grund haben wir das Bild jedoch auf 4x3 zugeschnitten. Wir können die Eigenschaft für die background-size auf eine feste Länge festlegen, wir werden uns jedoch auf das contain und cover . Ich gehe auch davon aus, dass wir die Breite und / oder Höhe des body nicht beeinträchtigt haben.

contain

contain

Skalieren Sie das Bild unter Beibehaltung des intrinsischen Seitenverhältnisses (sofern vorhanden) auf die größte Größe, sodass sowohl Breite als auch Höhe in den Hintergrundpositionierungsbereich passen können.

Dadurch wird sichergestellt, dass das Hintergrundbild immer vollständig im Hintergrundpositionierungsbereich enthalten ist. In diesem Fall könnte jedoch ein leerer Bereich mit Ihrer background-color gefüllt sein:

cover

cover

Skalieren Sie das Bild unter Beibehaltung des intrinsischen Seitenverhältnisses (sofern vorhanden) auf die kleinste Größe, sodass sowohl Breite als auch Höhe den Hintergrundpositionierungsbereich vollständig abdecken können.

Dadurch wird sichergestellt, dass das Hintergrundbild alles abdeckt. Es wird keine sichtbare background-color angezeigt. Je nach Bildschirmverhältnis kann jedoch ein großer Teil Ihres Bildes abgeschnitten werden:

Demonstration mit aktuellem Code

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

background-blend-mode-Eigenschaft

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

Das Ergebnis finden Sie hier: https://jsfiddle.net/MadalinaTn/y69d28Lb/

CSS-Syntax: Hintergrund-Mischmodus: Normal | multiplizieren | Bildschirm | Überlagerung | verdunkeln | aufhellen | Farbe ausweichen | Sättigung | Farbe | Helligkeit;