Verschwommenes Hero-Image
Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 43 von 43.
Aufgabe
EinfachEs gibt ein Bild von New York City im Bereich .gallery.
Deine Aufgabe ist es, einen Blur-Filter mit einem Wert von 2px darauf mit CSS anzuwenden.
Probier es selbst
<html>
<head>
<title>Blurred Hero Image</title>
<style>
/* Add your CSS styles here: */
img {
width: 100%;
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg
">
</div>
</body>
</html>
Alle Lektionen in CSS Mastery
1Selektoren-Meisterschaft – Kombinationen
EinführungNachfahren-SelektorKind-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-SelektorWiederholungs-Challenge4Projekt: Dropdown-Menü
Das Untermenü hinzufügenDas Untermenü anzeigenWeiteres StylingInput und Button7Erstellen mit CSS Grid
Grid-GrundlagenGrid-row ElementplatzierungBenannte BereicheWiederholungs-Challenge2Interaktive Pseudoklassen
PseudoklassenHover-EffekteFokus-EffekteAktiv-StylesWiederholungs-Challenge3Strukturelle Pseudoklassen
Strukturelle PseudoklassenDas erste Kind-Element ansprechenDas letzte Kind-Element ansprechenMuster-Power: nth-child nutzenWiederholungs-Challenge6Landing Page
Header-Bereich stylenDen Button stylenSektions-LayoutCard-LayoutDen letzten Schliff hinzufügen9Abschluss-Herausforderungen
Aktives Menü hervorhebenZebra-TabellenzeilenButton-Hover-EffektGrid-Card-LayoutVerschwommenes Hero-Image