Forskjellige metoder for å mørkne bakgrunnsbilde i CSS

Ingen tvil om at bakgrunnsbilder forbedrer utseendet til en webside. Imidlertid, hvis de tilførte bildene er veldig lyse og har flere farger, kan de få en side til å se lite attraktiv ut, og brukeren vil føle seg ukomfortabel. I et lignende scenario er det fineste alternativet å mørkne de tilførte bildene.

Må du laste ned bildene og redigere dem i Photoshop? Absolutt ikke! Ulike CSS -egenskaper kan tjene deg til det spesifiserte formålet.

I denne oppskrivningen vil vi forklare de forskjellige metodene for å mørkne bakgrunnsbilder ved hjelp av CSS.

Hvordan mørkere bakgrunnsbilde i CSS?

Sjekk ut de nedenfor-listede egenskapene for å mørkne bakgrunnsbilder ved hjelp av CSS.

• filteregenskap
• bakgrunnseiendom
• Bakgrunn-blend-modus eiendom

La oss utforske hver metode en etter en!

Metode 1: Bruk "Filter" -egenskaper for å mørkne bakgrunnsbilde i CSS

I CSS, “filter”Eiendom brukes til å legge til grafiske effekter på HTML -elementer, spesielt på bilder. Denne egenskapen kan også hjelpe til med å mørkne bakgrunnsbildet når det er "lysstyrke”Verdien legges til.

Se på det gitte eksemplet for å sjekke prosedyren for å mørkne bakgrunnsbildet ved hjelp av CSS -filteregenskapen.

Eksempel

I dette eksemplet vil vi mørkne følgende bakgrunnsbilde:

I det første trinnet vil vi bruke "bakgrunn”Eiendom med verdien”URL ()”For å stille bakgrunnsbildet; erklærer “Ingen repeter”Vil ikke la bildet gjenta seg flere ganger. Deretter, "polstring”Av“15%”Vil bli brukt til å gi den spesifikke plassen til containeren vår. Til slutt ved å bruke “filter”Eiendom og sette verdien til“Lysstyrke (40%)”Vil redusere lyset som strømmer på bildet og få det til å mørkne:

Lagre den la til koden i HTML -filen og åpne den ganske enkelt i nettleseren eller bruk "Live server”Utvidelse for samme formål:

Som du kan se, har bakgrunnsbildet blitt mørklagt ved hjelp av CSS -filteregenskapen:

Metode 2: Bruk "bakgrunn" -egenskap for å mørkne bakgrunnsbilde i CSS

“bakgrunn”Eiendom kan brukes til å angi bakgrunnsbilde, dets farge, størrelse og plassering på websiden. Med andre ord, ved å bruke bakgrunnseiendom, kan du bruke nesten alle egenskapene til et bakgrunnsbilde på en gang.

Eksempel

Vi vil nå bruke “bakgrunn”Eiendom med verdien”Lineær-gradient ()”Og plasser to verdier med RGBA -fargeskjemaet inni dem. Dette vil skape en grå gjennomsiktighetsskygge over bildet og få den til å mørkne:

Produksjon

Lær nå om egenskapen til bakgrunnsmodus i neste metode.

Metode 3: Bruk "bakgrunnsblendingsmodus" -egenskap for å mørkne bakgrunnsbilde i CSS

“Bakgrunn-blend-modus”Eiendom er nyttig når fargen og et bilde eksisterer sammen på samme sted. Denne egenskapen brukes til å blande lagene med bilder med bakgrunnsfargen. Det vil også mørke bakgrunnsbildet med en spesifikk verdi.

Eksempel

Først, sett bakgrunnsfargen “grå”For beholderen ved å bruke“bakgrunnsfarge”Eiendom. I neste trinn, bruk verdien “multiplisere”Langs eiendommen”Bakgrunn-blend-modus”. Dette vil blande bildet og blande laget med bakgrunnen: