Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Challenge: Eine Bildbeschriftung über dem Bild platzieren

Challenge: Eine Bildbeschriftung über dem Bild platzieren

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Challenge: Eine Bildbeschriftung über dem Bild platzieren

“

(Musik) In der Challenge zu diesem Kapitel geht es darum, eine Bildbeschriftung über ein Bild zu legen, und zwar mithilfe der Eigenschaft position. Dazu öffnen Sie zunächst die Übungsdatei aus dem Ordner zur Challenge, die heißt "bildbeschriftungen.html". Die Bildbeschriftung steht im Element figcaption. Diese Beschriftung soll am unteren Bildrand positioniert werden und über dem Bild stehen. Die Beschriftung soll einen halbtransparenten Hintergrund haben, so dass noch ein bisschen durchscheint, dass man dahinter das Bild noch ein bisschen erahnen kann. Und Ihre Aufgabe besteht darin, das dazu benötigte CSS zu erstellen bzw. zu ergänzen. So ungefähr könnte das aussehen, hier ist das Bild, hier ist die Bildbeschriftung, die steht über dem Bild, und das Bild scheint hier noch so ein klein bisschen durch. Viel Spaß beim Probieren und wir sehen uns in der Solution.

Inhalt