Lära Utmaning: Implementera Dekorativa Effekter i CSS | Lägga till Dekorativa Effekter med CSS

Uppgift

Öva på att förbättra webbplatsens visuella utseende. Uppgiften omfattar:

Lägg till en skugga på div-elementet med klassen card. De angivna skuggvärdena är rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Lägg till en bakgrundsbild på div-elementet med klassen card. Bildlänken är: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centrera bakgrundsbilden i kortet.

index.html

index.css

För att lägga till en skugga på ett element, använd egenskapen box-shadow med det angivna värdet. I detta fall är värdet rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
För att ange en bild som bakgrund med egenskapen background-image, använd syntaxen url("correct path"). Inom parenteserna, öppna citattecken och ange sökvägen till bilden. I denna uppgift är den korrekta sökvägen: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
För att bestämma bakgrundsbildens position, använd egenskapen background-position. I detta fall, ange värdet center för egenskapen.

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 6

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Svep för att visa menyn

Öva på att förbättra webbplatsens visuella utseende. Uppgiften omfattar:

Lägg till en skugga på div-elementet med klassen card. De angivna skuggvärdena är rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Lägg till en bakgrundsbild på div-elementet med klassen card. Bildlänken är: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centrera bakgrundsbilden i kortet.

index.html

index.css

För att lägga till en skugga på ett element, använd egenskapen box-shadow med det angivna värdet. I detta fall är värdet rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
För att ange en bild som bakgrund med egenskapen background-image, använd syntaxen url("correct path"). Inom parenteserna, öppna citattecken och ange sökvägen till bilden. I denna uppgift är den korrekta sökvägen: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
För att bestämma bakgrundsbildens position, använd egenskapen background-position. I detta fall, ange värdet center för egenskapen.

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 6