Alt du trenger å vite om opasitet i CSS

Denne artikkelen vil introdusere deg for konsept som vil hjelpe deg med å forstå opasitet i og fortelle deg hvordan du skal kontrollere denne parameteren. Følgende tips vil bli dekket i denne artikkelen,

• Opasitet i CSS
• Opasitet arvet med kaskaderende elementer
• RGBA-attributtinnstilling for kaskaderende elementer
• Opasitet endres på sveveeffekten

Bakgrunnsgjennomsiktighet til et element er en nyttig funksjon i HTML-design. Ved å stille inn nivået på opasitet (omvendt av gjennomsiktighet), kan en designer kontrollere synligheten til elementet gjennom CSS opacity-egenskapen. Dette brukes vanligvis som bakgrunnsinnstilling når det er kaskader av elementer, plassert over hverandre.

Det vanligste scenariet der denne funksjonen brukes, er dette:

• Et delvis gjennomsiktig bakgrunnsbilde er plassert bak et tekstelement.
• Bakgrunnsbildet er farlig synlig, så det dominerer ikke teksten foran.
• Bildet kan komme i full fokus når brukeren eksplisitt velger å se det.

Det kan være lurt å lese om før du går videre med å lære om CSS opacity.

For en omfattende CSS-opplæring, besøk Edureka CSS Tutorial For Beginners . Du får en utmerket heads-up på måten CSS skal brukes til å øke HTML-webdesign.

Fortsetter med denne artikkelen om Opacity in CSS

Opasitet i CSS

I CSS er opasitet satt som en numerisk verdi som varierer mellom 0,0 - 1,0. Verdier nærmere null representerer mer gjennomsiktighet, bildet vil være veldig lett synlig. La oss starte med et eksempel på at et bilde vises med 50% gjennomsiktighet. Se eksempel 1 nedenfor.

Eksempel 1: Bakgrunnsbilde satt til semi- åpenhet

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

Eksempel 1: Utgang

Opprinnelig bilde (100% opasitet)

Bilde med 50% opasitetsinnstilling

I eksemplet ovenfor var det bare ett element - et bilde. Andre elementer kan også angis med parameteren opacity, for eksempel tekst, div-elementer og så videre.

Fortsetter med denne artikkelen om Opacity in CSS

Opasitet arvet med kaskaderende elementer

Når elementene er stablet over hverandre, hvis bakgrunnselementet har innstillingen for opasitet, arves det av alle underordnede elementer. Dette er standardinnstilling . Det betyr at hvis en tekstboks er plassert over et bilde og bildet har en innstilling på 0,5 opacitet, vil både bilde- og tekstelementet bare være delvis synlig.

La oss ta forekomsten av et underordnet tekstelement plassert over TOM & JERRY-bildet i vårt neste eksempel. Vi kan se standard opasitetseffekt i eksempel 2.

.container {position: relative text-align: center opacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRY

Eksempel 2: Tekst arver opasitet fra overordnet bilde

Fortsetter med denne artikkelen om Opacity in CSS

RGBA-attributtinnstilling for kaskaderende elementer

Det er en annen måte som opasitet kan kontrolleres med kaskaderende elementer. Hvis du vil at underordnet element skal forbli upåvirket av opasiteten til bakgrunnselementet, kan du bruke det RGBA-attributtinnstilling .

Eksempel 3: Bruke RGBA-innstilling

bakgrunn: rgba (76, 175, 80, 1.0) / * Bildet har ingen innstillinger for opasitet * / / * Grønn bakgrunn for tekst med 100% opacity * / / * Blåfargetekst har 100% opacity * /

bakgrunn: rgba (76, 175, 80, 0.4) / * Bildet har ingen innstillinger for opasitet * / / * Grønn bakgrunn for tekst med 40% opacity * / / * Blå tekst fremdeles sett med 100% opacity * /

Etter RGB-fargekoden står attributt ‘a’ for alfa . De alfa parameteren er et tall mellom 0,0 (fullstendig gjennomsiktig) og 1.0 (fullstendig ugjennomsiktig).

Fortsetter med denne artikkelen om Opacity in CSS

Opasitet endres på sveveeffekten

I noen scenarier vil webdesignere at opasiteten skal variere avhengig av om brukeren er fokusert på elementet eller ikke. La oss for eksempel si at et bilde er satt til 50% opacitet som standard. Men når brukeren holder musen over bildet, vil vi at bildet skal komme i full fokus med 100% opasitet.

Eksempel 4 viser hvordan dette gjøres.

Vanlige punkter å merke seg:

• Innstilling av opasitet er et alternativ til å bruke attributtet ‘synlighet’ i CSS. Bruk av opasitetsinnstillingen gjør det imidlertid enkelt å angi forskjellige grader av gjennomsiktighet, fra null til full.
• Nivået på opasitet skal stilles inn etter nøye testing i forskjellige nettlesere. Når opasitet er satt til lave verdier, kan det hende at teksten eller bildet blir helt usynlig eller uleselig.
• Tanken bak bruk av opasitet er å sette skarpt fokus på noen elementer, mens andre bakgrunnselementer ikke distraherer brukerens oppmerksomhet. Så slike bakgrunnselementer er satt med lavere opasitet.
• I Internet Explorer, for IE8 og eldre versjoner, er opacity-egenskapen en 'filter' -innstilling som strekker seg fra 1 til 100. I alle andre nettlesere varierer den fra 0 til 1.

Dette bringer oss til slutten av denne artikkelen om Opacity In CSS.

det har metoder fra skannerklassen lar deg

Hvis du er interessert i å lære mer om nettutvikling, kan du sjekke ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).

Hvis du fremdeles er interessert. Hvis du har spørsmål, kan du legge det ut i kommentarfeltet til denne 'Opacity In CSS' -bloggen, så vil vi komme tilbake til deg så snart som mulig.