Maskering i CSS

Noen ganger når du legger til bilder på et nettsted, er det påkrevd å enten uskarpe, skjule, lysne eller fokusere visse deler av et bestemt bilde. CSS la deg gjøre det med stor letthet og refererer til denne prosedyren som maskering.

Maskering betyr å enten skjule eller klippe bilder som vises på nettsteder på bestemte punkter ved hjelp av CSS Mask-Image-egenskapen. I denne oppskrivningen vil vi diskutere hvordan maskering utføres på forskjellige måter ved bruk av maske-bilderegenskapen.

La oss begynne.

Mask-Image Property

Maskemiljøegenskapen enten helt eller delvis skjuler deler av bilder ved å bruke forskjellige opacitetsnivåer. Et annet formål med denne egenskapen er å legge et bilde som en maske over en annen.

Syntaks

Mask-Image: Ingen | bilde | URL | Opprinnelig | arve;

Parametere er forklart nedenfor.

ingen: Dette er en standardverdi.

bilde: Denne verdien gjør et bilde som vil bli brukt som et maskelag.

URL: Denne verdien tar inn et bilde eller SVG -element i form av en URL -referanse.

La oss forstå maskering i CSS ved å bruke forskjellige eksempler.

Eksempel 1

I eksemplet nedenfor vil vi maskere en logo over et annet bilde.

Html

Før maskering

Etter maskering

CSS

div img
Bredde: 250px;
Høyde: 250px;

.maskering
Bredde: 300px;
Høyde: 300px;
bakgrunnsfarge: svart;
-Webkit-Mask-Box-Image: URL (logo.png);

Produksjon

Bildene har blitt maskert med suksess.

Eksempel 2

Du kan også bruke gradienter til å maskere bilder. Nedenfor har vi presentert deg et eksempel der vi har laget en ellipse som en maske over bildet ved hjelp av maskering.

Html

Vi har ganske enkelt lagt til et bilde ved hjelp av taggen.

CSS

div img
Bredde: 250px;
Høyde: 250px;

.maskering
Bredde: 300px;
Høyde: 300px;
-Webkit-Mask-Box-Image: Radial-Gradient (Ellipse 60% 30% ved 50% 50%, grå 60%, RGBA (146, 140, 140, 0.3) 40%);
Border: 3px solid svart;

I koden ovenfor bruker vi den radialgradientfunksjonen for å maskere et lag over et bilde i form av en ellipse med en størrelse på 60% øverst og bunn, og 30% til høyre og venstre. I mellomtiden er startposisjonene til alle sidene satt til 50% for å holde ellipsen -formen i sentrum. Videre ga vi den også en startfarge og også en sluttfarge.

Produksjon

Et maskelag ble vellykket lagt til bildet i form av en ellipse.

Eksempel 3

Anta at du vil maskere et lag i form av en sirkel ved hjelp av gradienter. Her er prøvekoden.

CSS

div img
Bredde: 200px;
Høyde: 200px;

.maskering
Bredde: 250px;
Høyde: 250px;
-Webkit-Maske-Box-Image: Radial-Gradient (sirkel på 50%50%, grå 60%, RGBA (146, 140, 140, 0.3) 60%);
Border: 3px solid svart;

For å danne en sirkel i sentrum har vi tildelt den en posisjon på 50% på alle sider med start- og sluttfarger.

Produksjon

En maskert sirkel ble opprettet med suksess.

Konklusjon

Maskering betyr å enten skjule eller klippe bilder som vises på nettsteder på bestemte punkter ved hjelp av CSS Mask-Image-egenskapen. Maskebildeegenskapen utfører denne oppgaven ved å tilordne forskjellige opacitetsnivåer til deler av bilder, dessuten kan den maskere ett bilde over et annet. Det kommer godt med når du vil uskarpe, skjule, lysne eller fokusere visse deler av et bestemt bilde. I dette innlegget har vi diskutert hvordan maskering utføres i CSS sammen med relevante eksempler.