Maskowanie w CSS

Czasami podczas dodawania obrazów do strony internetowej jest wymagane do rozmycia, ukrycia, rozjaśnienia lub skupienia niektórych części konkretnego obrazu. CSS pozwólcie to z wielką łatwością i nazywa tę procedurę jako maskowanie.

Maskowanie oznacza, że ​​ukryj obrazy pojawiające się na stronach internetowych w określonych punktach za pomocą właściwości CSS Mask-Image. W tym artykule omówimy, w jaki sposób maskowanie jest wykonywane na różne sposoby za pomocą właściwości Mask-Image.

Zaczynajmy.

Właściwość maski

Właściwość maski-obraza całkowicie lub częściowo ukrywa części obrazów przy użyciu różnych poziomów krycia. Innym celem tej właściwości jest nakładanie obrazu jako maski nad inną.

Składnia

MASK-IMAGE: Brak | Zdjęcie | URL | początkowe | dziedziczyć;

Parametry są wyjaśnione poniżej.

nic: To jest wartość domyślna.

obraz: Ta wartość renderuje obraz, który będzie używany jako warstwa maski.

URL: Ta wartość przyjmuje obraz lub element SVG w postaci odniesienia do adresu URL.

Zrozumiemy maskowanie w CSS przy użyciu różnych przykładów.

Przykład 1

W poniższym przykładzie zamaskujemy logo nad innym obrazem.

Html

Przed maskowaniem

Po maskowaniu

CSS

div img
szerokość: 250px;
Wysokość: 250px;

.maskowanie
szerokość: 300px;
Wysokość: 300px;
kolor tła: czarny;
-Webkit-Mask-box-Imagage: URL (logo.png);

Wyjście

Obrazy zostały zamaskowane z powodzeniem.

Przykład 2

Możesz także użyć gradientów do maskowania obrazów. Below we have presented you with an example where we have created an ellipse as a mask over the image using masking.

Html

Po prostu dodaliśmy obraz za pomocą znacznika.

CSS

div img
szerokość: 250px;
Wysokość: 250px;

.maskowanie
szerokość: 300px;
Wysokość: 300px;
-Webkit-Mask-box-Imagage: Grads-gradent (elipsa 60% 30% przy 50% 50%, Gray 60%, RGBA (146, 140, 140, 0.3) 40%);
Border: 3px Solid Black;

W powyższym kodzie używamy funkcji promieniowej, aby maskować warstwę nad obrazem w postaci elipsy o wielkości 60% u góry i na dole, a 30% po prawej i lewej stronie. Tymczasem pozycje początkowe wszystkich boków są ustawione na 50%, aby utrzymać kształt elipsy na środku. Ponadto daliśmy mu również kolor początkowy, a także kolor końcowy.

Wyjście

Warstwę maski została pomyślnie dodana do obrazu w postaci elipsy.

Przykład 3

Załóżmy, że chcesz zamaskować warstwę w postaci koła za pomocą gradientów. Oto przykładowy kod.

CSS

div img
szerokość: 200px;
Wysokość: 200px;

.maskowanie
szerokość: 250px;
Wysokość: 250px;
-Webkit-Mask-box-Imagage: Gradnts promieniowy (okrąg o 50%50%, Gray 60%, RGBA (146, 140, 140, 0.3) 60%);
Border: 3px Solid Black;

Aby utworzyć okrąg w środku, przypisaliśmy mu pozycję 50% na wszystkich stronach z kolorami początkowymi i końcowymi.

Wyjście

Z powodzeniem stworzono zamaskowane koło.

Wniosek

Maskowanie oznacza, że ​​ukryj obrazy pojawiające się na stronach internetowych w określonych punktach za pomocą właściwości CSS Mask-Image. Właściwość Maski-Image wykonuje to zadanie, przypisując różne poziomy krycia do części obrazów, a ponadto może maskować jeden obraz nad drugim. Przydaje się, gdy chcesz się rozmyć, ukryć, rozjaśniać lub skupić niektóre części konkretnego obrazu. W tym poście omówiliśmy, w jaki sposób maskowanie jest wykonywane w CSS wraz z odpowiednimi przykładami.