CSS Text Opacity

Opaciteten er definert i CSS som "gjennomsiktighet". Teksten opacitet er den gjennomsiktighetseffekten vi gjelder for enhver tekst. Vi har to forskjellige egenskaper i CSS for å sette tekstenes opacitet. For å angi tekstens opacitet, bruker vi "opacitet" -egenskapen så vel som alfaverdien som bestemmer tekstenes opacitet i "RGBA". Ved å bruke opacitetsegenskapen og endre alfaverdien i RGBA, kan vi justere tekstenes opacitet i CSS. Opaciteten varierer mellom “0.0 ”og“ 1.0.”Den“ helt gjennomsiktige ”fargen har en verdi på“ 0.0 ”mens den“ helt ugjennomsiktig ”fargen har en verdi på“ 1.0 ”. Vi bruker CSS -egenskaper for å endre tekstenes opacitet i denne guiden.

Eksempel 1: Bruke opacity -egenskap

Vi trenger noen avsnitt for å bruke opacitetsfunksjonen i CSS. Vi skal lage noen HTML -avsnitt her. For å gjøre det, må vi først konstruere HTML -filen. Visual Studio Code er programvaren vi bruker til å utføre disse eksemplene. Du kan gjøre dette i hvilken som helst programvare som Notisblokk. Vi lager noen "div" -klasser med forskjellige navn i kroppen. Inne i hver div lager vi et avsnitt med "

" stikkord. Vi skal lage tre div med unike navn som "T1", "T2" og "T3". Vi lager avsnitt i disse divene. Som et resultat er det opprettet tre avsnitt. Vi vil også bruke denne HTML -koden for andre eksempler. Nå går vi til CSS -filen og bruker CSS -opaciteten på teksten. I HTML -koden “Head” -elementet koblet vi i tillegg CSS -filen til denne HTML -siden.

Vi setter den originale "røde" fargen på overskriften ved å bruke "farge" -egenskapen og style denne overskriften som "kursiv". Deretter bruker vi navnet på First Div “T1” der vi har et avsnitt og setter sin “fontstørrelse” til “16px”. Vi bruker det "røde" for fontets "farge". Men i neste linje bruker vi egenskapen "Opacity". Så når vi bruker denne egenskapen, vil den gi litt opacitet til gjennomsiktighetseffekten av tekstfargen vår. Her setter vi en “0.8 ”verdi til denne“ opacitet ”-egenskapen. For neste “Div.T2 ”avsnitt, vi satte den samme“ fontstørrelsen ”“ 16px ”og den samme“ røde ”“ fargen ”. Men denne gangen endres verdien av "opaciteten" til "0.5 ”for Second Divs avsnitt. For den tredje og den siste “div.T3 ”, vi bruker“ 0.3 ”som“ opacitet ”-verdien.

Her er utgangen, se at fargen på teksten vises med forskjellige opacitetsverdier. Overskriftenes farge er den opprinnelige røde fargen, men fargen på avsnittene vises med noen opacitetsverdier. Alle tre avsnitt har forskjellige opacitetsverdier.

Eksempel nr. 2: Bruke alfaverdi i RGBA

Her skal vi bruke RGBA -verdiene der “A” er for alfaverdi, og denne alfaverdien setter tekstenes opacitet. Først setter vi ganske enkelt RGB -verdien til overskriften, og RGB -verdien vi bruker her representerer den "lilla" fargen. Deretter bruker vi det "kursiverte" nøkkelordet for å sette "fontstil" på overskriften. Vi setter den også som "font-family" og bruker "algerisk" font for dette. Det er justert i "senteret" ved å bruke egenskapen "tekst-align".

Da skal vi bruke den første “DIV.T1 ”og bruk“ RGBA ”-verdien. Her setter vi "RGB" -verdien av lilla farge og setter deretter alfaverdien også til "0.9 ”. Etter dette satte vi den samme “RGB” -verdien, men endret alfaverdien og satte den til “0.7 ”. Vi har også et annet Div -avsnitt, og for denne siste “Div.T3 ”avsnitt, vi bruker“ 0.5 ”alfaverdi som setter sin opacitet til“ 0.5 ”verdi.

Legg merke til i resultatet hvordan tekstfargen endres avhengig av alfaverdien. Fargen på overskriften er den originale lilla. Men fargen på avsnittene har noen alfaverdier som setter sin opacitet. Opacitetsverdiene i alle tre avsnitt er forskjellige.

Eksempel nr. 3:

Først skal vi sette "bakgrunnsfargen" for hele kroppen og sette den til "svart". Deretter bruker vi igjen RGBA -verdier der “A” står for alfa -verdi. Denne alfaverdien bestemmer tekstens opacitet som vi diskuterte ovenfor. For å begynne. Vi bruker den første “div.T1 ”og“ RGBA ”-verdien der vi setter inn“ RGB ”-verdien av samme farge som overskriften og setter alfaverdien til“ 0.7 ”. Etter det setter vi den samme “RGB” -verdien som før. Denne gangen endret vi alfaverdien til “0.4 ”. Vi har også et annet Div -avsnitt, og vi bruker “0.2 ”alfaverdi for å endre opaciteten til denne siste“ div.T3 ”avsnitt til“ 0.2 ”.

Observer hvordan tekstfargen varierer når alfaverdien endres. Overskriften er den opprinnelige fargen, men fargen på avsnittet inkluderer alfaverdier som bestemmer deres opacitet. Alle tre avsnitt har distinkte opacitetsverdier.

Eksempel 4:

Vi lager ni forskjellige divklasser her med et unikt navn for hver div og kommer til å anvende alle opacitetsverdier på hver div separat i CSS.

Vi styler hele kroppen og setter teksten i "sentrum" på siden. Så alle avsnitt vises i "senteret". Vi setter også "fet" for all "kropp" ved å bruke "fontvekt" og setter størrelsen på skriften eller teksten til "20px". Overskriften vår vil vises i den originale "maroon" fargen når vi setter denne fargen i "farge" -egenskapen. "Algerier" er "font-familiens" for overskriften. Vi setter samme farge for alle divene ved å bruke egenskapen "farge". I alle Divs avsnitt har vi endret verdien av "opaciteten". I hver div reduserer vi verdien av opaciteten med en slik for andre divs vi setter verdien av "opaciteten" til "0.9 ”. Så, for neste div, setter vi verdien av denne opacitetseiendommen til “0.8 ”. For den tredje div bruker vi “0.7 ”opacitetsverdi og så videre. På denne måten endrer vi opacitetsverdiene hver gang for hver div.

Her, se på utdataene nedenfor, teksten Opacity -verdiene starter fra “0.9 ”og slutt på“ 0.1". Den opprinnelige fargen brukes også her for overskriften, og alle avsnitt inneholder opacitetsverdier.

Konklusjon:

Vi har laget denne guiden for deg der vi endrer tekstenes opacitet og lærer hvordan du kan endre tekstenes opacitet i CSS. Vi har her forklart at opacitet brukes til å gi en gjennomsiktig effekt på teksten. Vi har også utforsket CSS -egenskapene som vi kan endre tekstenes opacitet. Vi har beskrevet og demonstrert hvordan vi bruker "opacitet" -egenskapen og "alfa" -verdien til RGBA for å endre tekstenes opacitet.