Erneute Betrachtung der CSS-Background-Eigenschaft

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

In diesem Tutorial werden wir uns eine der älteren, vertrauteren CSS-Eigenschaften ansehen: background. background ist eine von mehreren CSS-Eigenschaften, deren Funktionen oft übersehen werden. Tatsächlich gab es ein Upgrade mit CSS3, das neue Funktionen erhielt, die über das Hinzufügen eines Hintergrundbildes oder einer Hintergrundfarbe hinausgehen. Schauen wir uns einige von ihnen an!

1. Versatz der Hintergrundposition

Das Positionieren einer Hintergrundgrafik ist einfach und etwas, mit dem Sie wahrscheinlich bereits vertraut sind. Wenn wir den Hintergrund unten rechts im Element positionieren möchten, wenden wir bottom right auf background-position an. Zum Beispiel:

#workspace {
    width: 100%;
	max-width: 668px;
	height: 400px;
	background-color: #525d62;
	background-image: url(images/macbook.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}

Oder, bei der Kurzschreibweise, background, nach der URL-Definition:

#workspace {
    width: 100%;
	max-width: 668px;
	height: 400px;
	background: #525d62 url(images/macbook.png) no-repeat right bottom;
}

Seit dem Aufkommen von CSS3 konnten wir den Positionsversatz angeben; die genauen Abstände zu den eingestellten Positionen. In unserem Beispiel von bottom right fügen wir bottom 20px right 30px ein, um unseren Hintergrund bei 20px von unten und 30px von links zu positionieren.

#workspace {
    width: 100%;
	max-width: 668px;
	height: 400px;
	background-color: #525d62;
	background-image: url(images/macbook.png);
	background-repeat: no-repeat;
	background-position: right 30px bottom 20px;
}

Die Positionen (bottom, top, right, left) können in beliebiger Reihenfolge definiert werden, die Versatzlänge muss jedoch nach jeder Hintergrundposition definiert werden.

Dank geht an Metin Kazan für die Illustrationen.

2. Mehrere Hintergrundbilder

Die background-Eigenschaft ermöglicht es uns auch, mehrere Hintergrundbilder hinzuzufügen. Lassen Sie uns daher unser vorheriges Beispiel mit mehr Dingen und Gadgets erweitern.

Wir fügen diese Bilder zu einer einzelnen background- oder background-image-Deklaration hinzu, indem wir jedes Bild durch ein Komma trennen. Wir verwenden die background-position-Eigenschaft, die auch mehrere Werte akzeptiert, um jedes dieser Hintergrundbilder zu steuern.

#workspace {
	height: 400px;
	background-color: #525d62;
	background-image: 
        url(images/macbook.png),
		url(images/mouse.png),
		url(images/hdd.png),
		url(images/phone.png),
		url(images/ipad.png),
		url(images/coffee.png),
		url(images/camera.png);
	background-repeat: no-repeat;
	background-position: 
            50% 50%,   /* macbook.png */
            75% 295px, /* mouse.png */
            75% 230px, /* hdd.png */
            96% 240px, /* phone.png */
            20% 250px, /* ipad.png */
            22% 190px, /* coffee.png */
            7% 280px; /* camera.png */
}

Wir können feste Einheiten (z. B. Pixel), flexible Einheiten (z. B. Prozentsätze) oder eine Kombination aus beiden verwenden.

Jedes Wertepaar stellt Koordinaten von oben links im Containerelement bis oben links im Bild dar. Zum Beispiel ist die obere linke Seite des Kamerabildes 280px von der Oberseite des Containers, dann 7% der verfügbaren Breite von links.

Hinweis: Die verfügbare Breite ist die Gesamtbreite des Containerelements abzüglich der Breite des Hintergrundbilds. Daher erscheint ein Hintergrundbild, das zu 50% entlang der x-Achse positioniert ist, genau zentriert!

Bewegung

Da die background-position eine animierbare Eigenschaft ist, können wir außerdem einen lebendigeren, überzeugenderen Hintergrund schaffen:

1	#workspace {
2	width: 600px;
3	height: 400px;
4	background-color: #525d62;
5	background-repeat: no-repeat;
6	background-image:
7	url(images/macbook.png),
8	url(images/mouse.png),
9	url(images/hdd.png),
10	url(images/phone.png),
11	url(images/ipad.png),
12	url(images/coffee.png),
13	url(images/camera.png);
14	background-position:
15	50% 50%,
16	430px 295px,
17	425px 230px,
18	480px 240px,
19	105px 250px,
20	120px 190px,
21	40px 280px;
22	animation: 3s ease 0s inView forwards;
23	}
24	@keyframes inView {
25	0% {
26	background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px;
27	background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
28	}
29	20% {
30	background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px;
31	background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
32	}
33	30% {
34	background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px;
35	background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
36	}
37	40% {
38	background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px;
39	background-position-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%;
40	}
41	50% {
42	background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
43	background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%;
44	}
45	60% {
46	background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
47	background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%;
48	}
49	100% {
50	background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
51	}
52	}

Hier haben wir eine Reihe von Keyframes entlang einer Zeitleiste eingerichtet. Bei jedem Keyframe haben wir die background-position-x und die background-position-y jedes Hintergrundbildes geändert. Die Animation ist zugegebenermaßen rudimentär, also bitte den CodePen forken und verbessern!

Hinweis: Klicken Sie unten rechts im Pen auf Rerun, um die Animation anzuzeigen

Weitere Informationen zu CSS-Animationen

Ein paar bemerkenswerte Punkte

Die von uns verwendeten Hintergründe sind nacheinander angeordnet. Der allererste in der Liste wird oben im Stapel angezeigt, während der letzte aufgelistete am unteren Rand des Hintergrundstapels angezeigt wird.

#workspace {
    width: 600px;
    height: 400px;
	background-color: #525d62;
	background-image: 
        url(images/macbook.png),
		url(images/mouse.png),
		url(images/hdd.png),
		url(images/phone.png),
		url(images/ipad.png),
		url(images/coffee.png),
		url(images/camera.png); /* stacked at the bottom */
	background-repeat: no-repeat;
}

Alle Hintergrund-Untereigenschaften (background-repeat, background-size, background-position etc.) können mehrfach definiert werden, mit Ausnahme von background-color. Wenn wir mehrere Hintergründe mit der Shorthand der Eigenschaft background anwenden, definieren Sie die Hintergrundfarbe als den neuesten Wert, der wirksam wird. Zum Beispiel:

#workspace {
	height: 400px;
	background: 
        url(images/macbook.png) 50% 50% no-repeat,
		url(images/mouse.png) 430px 295px no-repeat,
		url(images/camera.png) 425px 230px no-repeat #525d62;
}

Alternativ können Sie nach der Shorthand-Eigenschaft eine separate background-color hinzufügen:

#workspace {
    width: 600px;
    height: 400px;
	background: 
        url(images/macbook.png) 50% 50% no-repeat,
		url(images/mouse.png) 430px 295px no-repeat,
		url(images/camera.png) 425px 230px no-repeat;
    background-color: #525d62;
}

Beide Codes tun dasselbe, aber ich finde letztere intuitiver und lesbarer.

3. Hintergrundbild mischen

Der background-blend-mode macht das gleiche wie in Grafikanwendungen wie Photoshop oder Gimp; Es mischt Hintergrundbilder miteinander sowie mit allem, was darunter liegt.

Der background-blend-mode nimmt unter anderem bekannte Werte wie overlay und multiply, die Jonathan Cutrell in seinem Tutorial zu diesem Thema fantastisch erklärt. Ich empfehle Ihnen dringend, es durchzulesen, damit wir in einige praktische Beispiele einsteigen können.

Farbe

Mischmodi in CSS: Farbtheorie und praktische Anwendung

Jonathan Cutrell

Es gibt mehrere Möglichkeiten, den CSS Blend Mode zu verwenden, um auffällige Designs zu erstellen, z. B. das Mischen eines Farbverlaufs mit einem Bild, auf das Ian Yates in seiner Inspirationsrunde hinweist:

Inspiration

Wöchentliche Inspiration: Good Golly, Gradienten

Ian Yates

Um diesen Effekt zu erzeugen, fügen wir ein Hintergrundbild und einen Farbverlauf hinzu und wenden den overlay-Mischmodus an.

#blend {
	background-repeat: no-repeat;
	background-image: url( 'img/people-15.jpg' ),
					  linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
	background-blend-mode: overlay;
}

Das Overlay wirkt sich auf beide der hier aufgeführten Hintergründe aus, daher müssen Sie möglicherweise vorsichtig sein, wenn Sie nicht möchten, dass alles miteinander vermischt wird. Wenn wir vermeiden möchten, dass alles mit der Hintergrundfarbe verschmilzt, setzen Sie den zweiten Wert auf normal, der für unser zweites Hintergrundbild gilt.

#blend {
	background-repeat: no-repeat;
	background-image: url( '../img/people-15.jpg' ),
					  linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
	background-color: yellow;
    background-blend-mode: overlay, normal;
}

4. Hintergrund-Clipping

Die background-clip-Eigenschaft ist ein Werkzeug, das steuert, wie sich die Hintergrundfarbe und das Bild innerhalb des CSS-Content-Box-Models erstrecken. Ähnlich wie die box-sizing-Eigenschaft nimmt die background-clip-Eigenschaft drei gültige Werte an, nämlich:

border-box ist der Standardwert, der das Hintergrundbild oder die Hintergrundfarbe bis zum äußeren Rand des Elements umfasst.
padding-box erstreckt sich über den Hintergrund bis zum äußeren Rand des Paddings, oder mit anderen Worten; der innere Rand des Rahmens.
content-box behält den Hintergrund innerhalb des Elementinhalts wie folgt bei:

Ein praktisches Beispiel, bei dem ich background-clip als praktisch empfunden habe, ist, wenn ich eine Schaltfläche mit einem Symbol mit einem einzigen Element erstellen muss. In der folgenden Demo erstreckt sich unser Bild vom linken bis zum rechten Rand des Elements, auch wenn wir auf jeder Seite Padding hinzufügen, da immer noch border-box gilt.

Wenn wir das Icon mit etwas Leerraum umgeben möchten, müssten wir es traditionell mit einem anderen Element umschließen und auf dieses zusätzliche Element auffüllen. Mit der background-clip-Eigenschaft können wir dies elegant tun, indem wir es auf content-box setzen und das Padding durch Rahmen der gleichen Farbe wie die Hintergrundfarbe ersetzen.

Zusammengefasst

Die background-Eigenschaft ist eine, die wir häufig in unseren Projekten verwenden. Hoffentlich hat dieser Artikel Sie an seine breiten und vielfältigen Anwendungen erinnert, und ich freue mich darauf, weitere Ideen in den Kommentaren zu hören.

Ein letzter Hinweis: Die Browserunterstützung für diese Eigenschaften (mit Ausnahme des background-blend-mode) ist großartig. Laut CanIUse werden ab Internet Explorer 9 mehrere Hintergründe unterstützt, mit nur ein paar trivialen Problemen. Hintergrundbildoptionen, z. B. die background-clip-Eigenschaft, sind fast genauso gut.

Mischmodi funktionieren zum Zeitpunkt des Schreibens am besten in Chrome, Opera, sind teilweise in Safari aufgrund einiger Fehler anwendbar, scheinen aber leider keine Anzeichen von Fortschritten mit Microsoft Edge gemacht zu haben.