Alt hvad du behøver at vide om opacitet i CSS

Denne artikel introducerer dig til koncept, der hjælper dig med at forstå uigennemsigtighed i og fortælle dig, hvordan du styrer denne parameter. Følgende punkter vil blive dækket i denne artikel,

• Opacitet i CSS
• Opacitet arvet med kaskadende elementer
• RGBA-attributindstilling til kaskaderende elementer
• Opacitet ændrer sig på svæveeffekten

Baggrundsgennemsigtighed for et element er en nyttig indstilling i HTML-design. Ved at indstille niveauet for uigennemsigtighed (omvendt af gennemsigtighed) kan en designer kontrollere synligheden af ​​elementet gennem CSS-opacitetsejendommen. Dette bruges normalt som baggrundsindstilling, når der er kaskader af elementer, placeret oven over hinanden.

Det mest almindelige scenario, hvor denne funktion bruges, er dette:

• Et delvist gennemsigtigt baggrundsbillede er placeret bag et tekstelement.
• Baggrundsbilledet er farligt synligt, så det dominerer ikke teksten foran.
• Billedet kan komme i fuld fokus, når brugeren udtrykkeligt vælger at se det.

Du vil måske læse om inden du går videre med at lære om CSS opacitet.

få længde på array i javascript

For en omfattende CSS-tutorial, besøg Edureka CSS-vejledning til begyndere . Du får en fremragende heads-up på den måde, CSS skal bruges til at udvide HTML-webdesign.

Fortsætter med denne artikel om opacitet i CSS

Opacitet i CSS

I CSS indstilles opacitet som en numerisk værdi, der varierer mellem 0,0 - 1,0. Værdier tættere på nul repræsenterer mere gennemsigtighed, billedet vil være meget let synligt. Lad os starte med et eksempel på et billede, der vises med 50% gennemsigtighed. Se eksempel 1 nedenfor.

Eksempel 1: Baggrundsbillede indstillet til semi- gennemsigtighed

img {opacity: 0.5 filter: alpha (opacity = 50) / * For IE8 og tidligere * /}  

Eksempel 1: Output

Originalbillede (100% opacitet)

Billede med 50% opacitet

I ovenstående eksempel var der kun et element - et billede. Andre elementer kan også indstilles med opacitetsparameteren såsom tekst, div-elementer og så videre.

Fortsætter med denne artikel om opacitet i CSS

min sql tutorial til begyndere

Opacitet arvet med kaskadende elementer

Når elementerne er stablet over hinanden, og hvis baggrundselementet har indstillingen for opacitet, arves det af alle underordnede elementer. Dette er standardindstilling . Det betyder, at hvis en tekstboks er placeret over et billede, og billedet har en indstilling på 0,5 opacitet, vil både billed- og tekstelementet kun være delvis synligt.

Lad os tage forekomsten af ​​et underordnet tekstelement placeret over TOM & JERRY-billedet i vores næste eksempel. Vi kan se standardopacitetseffekten i eksempel 2.

.container {position: relativ tekstjustering: centeropacitet: 0,5}. centreret {position: absolut top: 50% tilbage: 50% transform: translate (-50%, -50%) farve: blå skriftstørrelse: 40 pixel} } TOM & JERRY

Eksempel 2: Tekst arver opacitet fra overordnet billede

Fortsætter med denne artikel om opacitet i CSS

RGBA-attributindstilling til kaskaderende elementer

Der er en anden måde, hvorpå uigennemsigtighed kan kontrolleres med kaskaderende elementer. Hvis du ønsker, at underordnet element forbliver upåvirket af baggrundselementets opacitet, kan du bruge det RGBA-attributindstilling .

Eksempel 3: Brug af RGBA-indstilling

baggrund: rgba (76, 175, 80, 1.0) / * Billedet har ingen opacitetsindstilling * / / * Grøn baggrund for tekst med 100% opacitet * / / * Blåfarvetekst har 100% opacitet * /

baggrund: rgba (76, 175, 80, 0.4) / * Billedet har ingen indstilling for opacitet * / / * Grøn baggrund for tekst med 40% opacitet * / / * Blå tekst ses stadig med 100% opacitet * /

python def __init __ (selv)

Efter RGB-farvekoden står attribut 'a' for alfa . Det alfa parameter er et tal mellem 0,0 (fuldstændig gennemsigtig) og 1.0 (fuldstændig uigennemsigtig).

Fortsætter med denne artikel om opacitet i CSS

Opacitet ændrer sig på svæveeffekten

I nogle scenarier ønsker webdesignere, at opaciteten skal variere afhængigt af om brugeren er fokuseret på elementet eller ej. Lad os f.eks. Sige, at et billede er indstillet til 50% opacitet som standard. Men når brugeren holder musen over billedet, så ønsker vi, at billedet kommer i fuld fokus med 100% opacitet.

Eksempel 4 viser, hvordan dette gøres.

Almindelige punkter at bemærke:

• Opacitetsindstilling er et alternativ til at bruge attributten 'synlighed' i CSS. Brug af opacitetsindstillingen gør det dog let at indstille forskellige grader af gennemsigtighed, der spænder fra nul til fuld.
• Niveauet for uigennemsigtighed skal indstilles efter omhyggelig test i forskellige browsere. Når opacitet er indstillet til lave værdier, kan teksten eller billedet undertiden blive helt usynligt eller ulæseligt.
• Ideen bag brug af opacitet er at sætte skarpt fokus på nogle elementer, mens andre baggrundselementer ikke distraherer brugerens opmærksomhed. Så sådanne baggrundselementer er indstillet med lavere opacitet.
• I Internet Explorer, for IE8 og ældre versioner, er opacitetsegenskaben en 'filter' indstilling fra 1 til 100. I alle andre browsere varierer den fra 0 til 1.

Dette bringer os til slutningen af ​​denne artikel om opacitet i CSS.

Hvis du er interesseret i at lære mere om webudvikling, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).

Hvis du stadig er interesseret Hvis du har spørgsmål, kan du sende det i kommentarsektionen på denne 'Opacity In CSS' -blog, og vi vender tilbage til dig hurtigst muligt.