Hvordan legge til åpenhet i CSS ved hjelp av opacity -egenskap?

Åpenhet kan legges til elementer, for eksempel bilder og DIV -containere for å forbedre det generelle utseendet til et nettsted. For å gjøre et element gjennomsiktig, brukes CSS Opacity -egenskapen. Denne egenskapen kan gi verdier fra 0.0 til 1.0. I denne oppskrivningen skal vi veilede deg hvordan du kan legge til åpenhet til elementer. Dette innlegget dekker følgende emner.

1. Hvordan legge til åpenhet til et element
2. Legge til en sveveeffekt sammen med åpenhet
3. Hvordan legge til åpenhet til et element
4. Legge til åpenhet med RGBA

La oss komme i gang.

Hvordan legge til åpenhet til et element

Du kan lage ethvert element (e.g. bilde) som vises på nettstedet ditt gjennomsiktig, ved å tilordne en viss verdi til CSS Opacity -egenskapen til elementet.

Eksempel

For å forstå begrepet åpenhet, følg eksemplet nedenfor.

Html

Her har vi lagt til et bilde og satt bredden til 200px og høyde til 250px.

CSS

IMG
Opacitet: 0.6;

Opaciteten til bildet er satt til 0.6.

Produksjon

Bildet er 60% ugjennomsiktig.

Merk: Opacitet og åpenhet er motsatt av hverandre. Derfor vil lave verdier av opacitetseiendom gjøre elementet mer gjennomsiktig og omvendt.

For eksempel, hvis vi reduserer opaciteten og setter den til 0.2 som dette.

IMG
Opacitet: 0.2;

Åpenheten vil øke.

Bildet er 20% ugjennomsiktig.

Legge til en sveveeffekt sammen med åpenhet

Du kan legge til en sveveeffekt sammen med å tilordne bildet til bildet. Å legge til denne effekten vil endre gjennomsiktigheten til et bilde når brukeren bringer musen over et bestemt bilde.

Eksempel

Eksemplet nedenfor viser hvordan du bruker en sveveeffekt med Opacity -egenskapen.

Html

I koden ovenfor legger vi til et bilde og gir det litt bredde og høyde.

CSS

IMG
Opacitet: 0.4;

IMG: Hopp
Opacitet: 1.0;

I ovennevnte CSS -kode tildeler vi først en opacitet på 0.4 For å gjøre bildet gjennomsiktige, legger vi en svevdeffekt til bildet med opacitet 1. Dette betyr at når brukeren bringer musen over bildet, vil den ikke være gjennomsiktig og det motsatte vil skje når musemarkøren flyttes bort fra bildet.

Produksjon

En sveveeffekt blir vellykket lagt til bildet sammen med åpenhet.

Hvordan legge til åpenhet til et element og dets barn

Ved å bruke opacitetsegenskapen, når du legger til åpenhet til et element, arver barna til det aktuelle elementet også åpenhet.

Eksempel

Her skal vi demonstrere hvordan vi kan legge til åpenhet til et element.

Html

Jeg har en opacitet på 0.6

Jeg har en opacitet på 1

Her har vi laget to elementer for å gjøre det klart hvordan åpenhet fungerer for HTML -elementer.

CSS

div.opacitet
Opacitet: 0.4;

div
bakgrunnsfarge: rosa;
polstring: 15px;

Det første divelementet har en åpenhet på 0.4 og det andre elementet er helt ikke-transparent.

Produksjon

Jo mer gjennomsiktig et element, innholdet inne i det elementet vil også være gjennomsiktig.

Legge til åpenhet med RGBA

RGBA -fargene brukes for å unngå situasjonen ovenfor, hvor når du bruker opacitet på et element, blir innholdet inne i elementet også gjennomsiktig.

Eksempel

For å forhindre at teksten er til stede i et element i å bli gjennomsiktig, bruk følgende kode.

Html

Med opacitetseiendom

Med RGBA -farge

I koden ovenfor lager vi to elementer. Den første diven har fått tildelt en opacitet på 0.2 For å demonstrere forskjellen mellom å bruke Opacity -egenskapen og bruke opacity -egenskap sammen med RGBA -farger.

CSS

div.RGB
Bakgrunn: RGB (255,192 203);
polstring: 15px;
Opacitet: 0.2;

div.rgba
Bakgrunn: RGBA (255.192.203, 0.2);

Den første diven har fått tildelt en rosa bakgrunnsfarge, polstring av 15px og opacitet på 0.2. Mens den andre diven har fått tildelt samme bakgrunnsfarge sammen med en opacitet på 0.2 som et fjerde argument i RGBA -metoden.

Produksjon

Teksten inne i elementet blir ikke gjennomsiktig når du bruker gjennomsiktighet med RGBA -farger.

Konklusjon

Du kan legge til åpenhet til forskjellige HTML -elementer som DIV -containere, eller bilder ved hjelp av opacity -egenskapen. Denne egenskapen gjengir verdier fra 0.0 til 1.0, dessuten, jo lavere verdien av denne egenskapen, jo mer er åpenheten. Sammen med åpenhet kan du også legge til en sveveeffekt på elementene, dessuten, bruk RGBA -farger for å forhindre at innholdet inne i et element blir gjennomsiktig når du legger til åpenhet til det. Dette innlegget guider deg hvordan du kan legge til åpenhet i CSS ved hjelp av opacity -egenskap sammen med relevante eksempler.