Mørkere bakgrunnsbilde CSS
Egenskaper for mørkere bakgrunnsbilde i CSS:
Vi vil bruke følgende tre egenskaper som CSS gir for å mørkne bakgrunnsbildet. Disse egenskapene er:
- Ved hjelp av filteregenskap.
- Ved hjelp av bakgrunnsbildeegenskaper og angi verdien i lineær gradient.
- Ved hjelp av egenskap av bakgrunnsmodus.
Nå skal vi bruke alle disse egenskapene i kodene våre nedenfor, og du vil lære av disse eksemplene hvordan du bruker disse egenskapene og hvordan du angir verdien av disse egenskapene fordi vi også vil forklare alle koder.
Eksempel nr. 1:
Vi bruker visuell studiokode for å vise eksemplene som er gitt. Så vi åpner den nye filen og velger “HTML” -språket, som vil resultere i produksjon av en HTML -fil. I den ny genererte filen begynner vi å skrive koden. “.HTML ”File Extension legges automatisk til filnavnet når vi lagrer den fullførte koden. Nå får vi grunnleggende tagger ved å sette "!”Merker og trykker på“ Enter ”. Når de grunnleggende HTML -kodene har dukket opp i denne filen som er opprettet, begynner vi med å legge til en overskrift.
Deretter legger vi også et avsnitt under denne overskriften og setter inn bildet etter dette avsnittet. Hvis bildet er satt inn, har vi et annet avsnitt og også en DIV-klasse med navnet "Darkened-Image". Her er HTML -koden fullført. Lagre den nå og la oss flytte til CSS -filen der vi vil legge til "filter" -egenskapen for å mørkne bakgrunnsbildet.
For “H1” setter vi “Font-Family” -verdien til “Algerie” og bruker også “farge” på denne overskriften som “grønn”. "Font-size" av avsnittteksten er "20px" og dens "farge" er "rød", "fet" i sin "fontvekt". Deretter skal vi bruke "filter" -egenskapen for DIV-klassen "Darkened-Image". Denne egenskapen hjelper til med å gjøre bildet mørkere. Vi brukte denne egenskapen her, slik at bildet vises mørkere i utgangen. Vi setter verdien ved å bruke "lysstyrke" -verdien og velge "60%" lysstyrke for dette bildet.
I "bakgrunnsbildet" legger vi den samme banen til bildet som vi har gitt i HTML-filen. Så vi bruker denne mørklagte egenskapen på bildet som vi har satt inn ovenfor, og vi vil se det originale bildet så vel som det mørklagte bildet på utgangsskjermen. Vi setter også "bredden" og "høyden" på Div som henholdsvis "200px" og "620px". Denne "høyde" -egenskapen vil sette høyden på div og "bredde" -egenskapen vil sette bredden på diven.
Vi gjør dette bildet til et mørkere bilde ved hjelp av CSS “Filter” -egenskaper og setter "lysstyrken" som verdien av denne egenskapen. Vi har brukt "60%" lysstyrke på dette bildet for å gjøre det mørkere enn det originale bildet.
Eksempel 2:
Vi har en overskrift her og legger deretter til bildet. Etter dette bildet plasserer vi igjen en overskrift, og så har vi en div container. Vi vil bruke den andre egenskapen for å gjøre dette bildet en mørkere.
Vi bruker "farge" på denne overskriften som "maroon" og setter "font-family" -verdien for "H1" til "Algerie". "Høyden" på bildet er satt til "240px" og "bredden" er "630px". Deretter nevner vi DIV-containeren "Darkened-Image" og legger "bakgrunnsbilde" -egenskapen der vi bruker "Linear-Gradient" og setter sin verdi i "RGBA" -form. Her bruker vi to “RGBA” -verdier og setter dem til “RGBA (0, 0, 0, 0.5) ”hvor“ 0.5 ”er alfaverdien. Vi setter også inn bildet i “URL ()”. Vi setter inn banen til bildet i denne "URL ()". "Høyden" på denne diven er "240px", og vi definerer også dens "bredde" til "630px".
I utgangen kan både de originale og mørklagte versjonene av bildet sees. Det originale bildet og det mørklagte bildet kan tydelig skilles fra hverandre på skjermdumpen nedenfor. Det mørklagte bildet blir gjengitt fordi vi har brukt egenskapen "bakgrunnsbilde" og setter verdien i "lineær-gradient" -typen.
Eksempel nr. 3:
Vi har brukt ovennevnte HTML -kode, og vi setter inn et annet bilde i denne koden. Vi vil bruke "bakgrunnsblendingsmodus" for å skape den mørklagte bildeeffekten på bildet.
Vi setter verdien "Font-Family" for "H1" til "Algerie" og bruker "farge" på denne overskriften til "Maroon". Bildets "bredde" er "630px" og "høyden" er "250px". Vi bruker DIV-klassenavnet som "Darkened-Image" og kommer til å bruke noen egenskaper på det. Vi bruker egenskapen "bakgrunn" og plasserer "RGBA" -verdien her. "RGBA" -verdien vi bruker er "(0, 0, 0, 0.7) ”Og så har vi“ URL ”-egenskapen som vi bruker for å gi banen til bildet. Vi gir bildets vei som "myNewimage.PNG ”.
Etter dette har vi egenskapen "bakgrunnsrepeter" og bruker nøkkelordet "No-Repeat" som verdien av denne egenskapen. Nå setter vi også "bakgrunnsstørrelse" og plasserer "deksel" slik at bildet dekker hele bakgrunnen. Egenskapen "bakgrunnsblendingsmodus" er for å anvende den mørkere effekten på bildet. Vi setter det som det "mørkere" nøkkelordet. Så når dette bildet gjengis på utgangsskjermen, vil det vises som et mørklagt bilde på grunn av denne egenskapen. "Høyden" på Div som heter "Darkened-Image" er justert til "330px", og vi setter også dens "bredde" som er "650px". Se nå på utgangen av hvordan disse bildene vil vises.
Både de originale og mørkere formene for bildet er synlige i resultatet. Her i øyeblikksbildet nedenfor er det mulig å enkelt fortelle forskjellen mellom det originale bildet og det mørklagte bildet. Vi brukte attributtet “Bakgrunn-Blend-Mode” og plasserte det "mørkere" nøkkelordet som verdien av denne attributtet for å gjengi det mørklagte bildet.
Konklusjon
Vi har dekket dette konseptet grundig og sett på mange tilfeller av hvordan du kan mørkne bakgrunnsbildet i CSS. Som tidligere nevnt, har vi brukt tre forskjellige egenskaper for å mørkne bakgrunnsbildet. Vi har brukt alle tre egenskapene i kodene våre. Vi dekket også hvordan vi bruker disse egenskapene og hvordan du setter verdien. Vi har diskutert at vi har egenskapen "filter", "bakgrunnsbilde" og også egenskapen "bakgrunnsblendingsmodus" for å gjøre bakgrunnsbildet mørkere. Vi ga også resultatene av alle disse kodene der vi har gjengitt både det mørke og det originale bildet på utgangsskjermen. Til din fordel har vi laget en omfattende tutorial der koden både er gitt og forklart grundig, sammen med resultatene.