Lære Udfordring: Implementering af Dekorative Effekter i CSS | Tilføjelse af Dekorative Effekter med CSS

Opgave

Øv dig i at forbedre det visuelle udtryk på websiden. Opgaven omfatter:

Tilføj en skygge til div-elementet med klassenavnet card. De angivne skyggeværdier er rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Tilføj et baggrundsbillede til div-elementet med klassenavnet card. Billedlinket er angivet: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centrér baggrundsbilledet i kortet.

index.html

index.css

For at tilføje en skygge til et element anvendes box-shadow-egenskaben med den angivne værdi. I dette tilfælde er værdien rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
For at angive et billede som baggrund ved hjælp af background-image-egenskaben, benyttes syntaksen url("correct path"). Indsæt stien til billedet i anførselstegnene. I denne opgave er den korrekte sti angivet: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
For at bestemme placeringen af baggrundsbilledet anvendes background-position-egenskaben. I dette tilfælde sættes værdien til center for egenskaben.

index.html

index.css

Bemærk

Du har gennemført kurset "CSS Fundamentals" og har mestret grundlæggende web-styling. Tag dine designfærdigheder til næste niveau med "Advanced CSS Techniques", eller begynd at kode interaktivitet i "Introduction to JavaScript". Din rejse som webudvikler fortsætter!

1. Hvilken egenskab tilføjer skygge omkring et elements boks?

2. Hvordan kan du tilføje et billede som baggrund på et element?

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 6

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.56

Stryg for at vise menuen

Opgave

Øv dig i at forbedre det visuelle udtryk på websiden. Opgaven omfatter:

Tilføj en skygge til div-elementet med klassenavnet card. De angivne skyggeværdier er rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Tilføj et baggrundsbillede til div-elementet med klassenavnet card. Billedlinket er angivet: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centrér baggrundsbilledet i kortet.

index.html

index.css

For at tilføje en skygge til et element anvendes box-shadow-egenskaben med den angivne værdi. I dette tilfælde er værdien rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
For at angive et billede som baggrund ved hjælp af background-image-egenskaben, benyttes syntaksen url("correct path"). Indsæt stien til billedet i anførselstegnene. I denne opgave er den korrekte sti angivet: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
For at bestemme placeringen af baggrundsbilledet anvendes background-position-egenskaben. I dette tilfælde sættes værdien til center for egenskaben.

index.html

index.css

Bemærk

Du har gennemført kurset "CSS Fundamentals" og har mestret grundlæggende web-styling. Tag dine designfærdigheder til næste niveau med "Advanced CSS Techniques", eller begynd at kode interaktivitet i "Introduction to JavaScript". Din rejse som webudvikler fortsætter!

1. Hvilken egenskab tilføjer skygge omkring et elements boks?

2. Hvordan kan du tilføje et billede som baggrund på et element?

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 6