Enmascarar en CSS

A veces, al agregar imágenes a un sitio web, se requiere desdibujar, esconder, iluminar o enfocar ciertas partes de una imagen en particular. CSS le permite hacer eso con gran facilidad y se refiere a este procedimiento como enmascaramiento.

Enmascarar medios para ocultar o recortar imágenes que aparecen en sitios web en puntos particulares utilizando la propiedad CSS Mask-Image. En este artículo, discutiremos cómo el enmascaramiento se realiza de varias maneras utilizando la propiedad de la imagen de máscara.

Vamos a empezar.

Propiedad de imagen de máscara

La propiedad de imagen de máscara oculta de forma total o en parte partes de imágenes utilizando diferentes niveles de opacidad. Otro propósito de esta propiedad es colocar una imagen como una máscara sobre otra.

Sintaxis

IMAGEN MASK: Ninguno | imagen | URL | inicial | heredar;

Los parámetros se explican a continuación.

ninguno: Este es un valor predeterminado.

imagen: Este valor representa una imagen que se utilizará como una capa de máscara.

URL: Este valor toma en una imagen o elemento SVG en forma de referencia de URL.

Entendamos el enmascaramiento en CSS usando varios ejemplos.

Ejemplo 1

En el ejemplo a continuación, enmascararemos un logotipo sobre otra imagen.

Html

Antes de enmascarar

Después de enmascarar

CSS

div img
Ancho: 250px;
Altura: 250px;

.enmascaramiento
Ancho: 300px;
Altura: 300px;
Color de fondo: negro;
-webkit-mask-box-image: url (logotipo.png);

Producción

Las imágenes han sido enmascaradas con éxito.

Ejemplo 2

También puede usar gradientes para enmascarar imágenes. A continuación le hemos presentado un ejemplo en el que hemos creado una elipse como máscara sobre la imagen usando enmascaramiento.

Html

Simplemente hemos agregado una imagen usando la etiqueta.

CSS

div img
Ancho: 250px;
Altura: 250px;

.enmascaramiento
Ancho: 300px;
Altura: 300px;
-WebKit-Mask-Box-Image: Gradiente radial (elipse 60% 30% a 50% 50%, gris 60%, RGBA (146, 140, 140, 0.3) 40%);
borde: 3px negro sólido;

En el código anterior, estamos utilizando la función de gradiente radial para enmascarar una capa sobre una imagen en forma de elipse con un tamaño de 60% en la parte superior e inferior, y 30% a la derecha e izquierda. Mientras tanto, las posiciones iniciales de todos los lados se establecen en 50% para mantener la forma de elipse en el centro. Además, también le dimos un color inicial y también un color final.

Producción

Se agregó con éxito una capa de máscara a la imagen en forma de elipse.

Ejemplo 3

Supongamos que desea enmascarar una capa en forma de círculo usando gradientes. Aquí está el código de ejemplo.

CSS

div img
Ancho: 200px;
Altura: 200px;

.enmascaramiento
Ancho: 250px;
Altura: 250px;
-WebKit-Mask-Box-Image: Gradial radial (círculo a 50%50%, gris 60%, RGBA (146, 140, 140, 0.3) 60%);
borde: 3px negro sólido;

Para formar un círculo en el centro, le hemos asignado una posición del 50% en todos los lados con colores iniciales y terminales.

Producción

Se creó un círculo enmascarado con éxito.

Conclusión

Enmascarar medios para ocultar o recortar imágenes que aparecen en sitios web en puntos particulares utilizando la propiedad CSS Mask-Image. La propiedad de la imagen de máscara realiza esta tarea asignando diferentes niveles de opacidad a partes de imágenes, además, puede enmascarar una imagen sobre otra. Es útil cuando quieres difuminar, esconder, iluminar o enfocar ciertas partes de una imagen en particular. En esta publicación, hemos discutido cómo se realiza el enmascaramiento en CSS junto con ejemplos relevantes.