Hvordan uskarpe et bakgrunnsbilde i CSS

I webapplikasjoner er bruk av bakgrunnsbilder en god tilnærming for å lage en estetisk forsvarlig websiden. Noen ganger er det påkrevd å uskarpe bakgrunnsbildet for å fokusere på innholdet på siden. Dessuten får det en webside til å se annerledes ut enn tusenvis av andre websider. CSS tilbyr mange funksjoner for å manipulere bakgrunnsbildet.

Denne guiden vil dekke hvordan du kan uskarpe et bakgrunnsbilde i CSS.

Hvordan uskarpe et bakgrunnsbilde i CSS?

For å gjøre bakgrunnsbildet uskarpe på kort tid, vil vi bruke "Filter" CSS -egenskapen. Å bruke filteregenskapen vil hjelpe oss med å uskarpe bilder effektivt.

Så la oss hoppe inn i detaljene.

Hva er filteregenskap i CSS?

I CSS, for å plassere noen grafiske effekter på HTML -elementer, “filter”Eiendom brukes. Hvis du for eksempel vil plassere noen effekter på et bilde, for eksempel uskarphet eller kontrast, kan du bruke filteregenskapen.

Syntaks:

Filter: Blur () | lysstyrke () | Hue-rotate () | kontrast () | Opacity () | Grayscale () | invert () | Drop-shadow () | mett () | Sepia () | URL () | ingen

Ettersom filteregenskap har mange verdier, og hvis vi utdyper noen få lysstyrke () gjør elementene lyse eller mørke, opacitet () spiller med gjennomsiktighet, gjør uskarphet () HTML -elementene uskarpe og ingen fjerner effekten hvis de er til stede.

Så la oss gå videre og forstå dypt med et eksempel på at hvordan kan vi gjøre bakgrunnsbildet uskarpe i CSS.

Eksempel

Her er et bakgrunnsbilde på websiden vår, la oss gjøre det uskarpt.

I HTML -filen, ta en "”Element inne i“" stikkord.

Html

La oss nå gå over til CSS -koden:

• Spesifiser “bakgrunn”Eiendom med verdien”URL”Og“Ingen repeter”. Dette vil sette det ikke-gjentatte bakgrunnsbildet.
• Tildel en passende plass til bildet ved å bruke "polstring”Eiendom med en verdi”25%”.
• I neste trinn tildeler vi “filter”Eiendom en verdi”uskarphet (9px)”For å få bildet til å se uskarpt ut. Verdien inne i uskarpheten (), “9px”Tillater å kontrollere hvor mye vi vil uskarpe det valgte bildet som om vi øker verdien til 10px, det vil få bildet til å se uskarpe. På den annen side, hvis vi reduserer verdien til 6 eller 7px, vil det få bildet til å se mindre uskarpe. Dessuten kan vi bruke enheten "REM”I stedet for PX.

CSS

div
Bakgrunn: URL (trær.jpg) ingen repetisjon;
polstring: 25%;
filter: uskarphet (9px);

Til slutt, lagre koden din og åpne den i nettleseren din for å bekrefte arbeidet.

Vi har forklart hvordan du kan uskarpe et bakgrunnsbilde i CSS.

Konklusjon

For å gjøre bakgrunnsbildet uskarpe, bruk CSS “filter”Eiendom med verdien”uklarhet()”. Verdien uskarphet kan endres for å kontrollere uskarphetsfrekvensen til et spesifisert bilde. Du kan angi verdien i PX eller REM for å øke eller redusere uskarphetseffekten på bildet. Denne artikkelen forklarer hvordan du kan uskarpe et bakgrunnsbilde i CSS.