Cuando recorta un elemento con el clip-path propiedad, el área recortada se vuelve invisible. Si, en cambio, desea hacer que parte de la imagen sea opaca o aplicarle algún otro efecto, entonces debe usar enmascaramiento. Esta publicación explica cómo usar el mask-image en CSS, que le permite especificar una imagen para usar como capa de máscara. Esto le da tres opciones. Puede utilizar un archivo de imagen como máscara, un SVG o un degradado.
Compatibilidad del navegador
La mayoría de los navegadores solo admiten parcialmente la propiedad de enmascaramiento CSS estándar. Necesitará usar el -webkit- prefijo además de la propiedad estándar para lograr la mejor compatibilidad del navegador. Ver ¿Puedo usar máscaras CSS? para obtener información completa sobre compatibilidad con el navegador.
Si bien la compatibilidad del navegador con la propiedad prefijada es buena, cuando se usa enmascaramiento para hacer visible el texto en la parte superior de una imagen, tenga en cuenta lo que sucederá si el enmascaramiento no está disponible. Puede valer la pena utilizar consultas de funciones para detectar compatibilidad con mask-image o -webkit-mask-image
y proporcionar un respaldo legible antes de agregar su versión enmascarada.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
}Enmascaramiento con una imagen
los mask-image La propiedad funciona de manera similar a la background-image propiedad. Usar una url() valor para pasar en una imagen. La imagen de su máscara debe tener un área transparente o semitransparente.
Un área completamente transparente hará que la parte de la imagen debajo de esa área sea invisible. Sin embargo, el uso de un área semitransparente permitirá que se vea parte de la imagen original. Puede ver la diferencia en el Glitch a continuación. La primera imagen es la imagen original de globos sin máscara. La segunda imagen tiene aplicada una máscara que tiene una estrella blanca sobre un fondo totalmente transparente. La tercera imagen tiene una estrella blanca sobre un fondo con una transparencia degradada.
En este ejemplo también estoy usando el mask-size propiedad con un valor de cover. Esta propiedad funciona de la misma forma que background-size. Puedes usar las palabras clave cover y contain o puede darle al fondo un tamaño usando cualquier unidad de longitud válida o un porcentaje.
También puede repetir su máscara del mismo modo que podría repetir una imagen de fondo, para usar una imagen pequeña como patrón repetitivo.
Enmascaramiento con SVG
En lugar de usar un archivo de imagen como máscara, puede usar SVG. Hay un par de formas de lograr esto. El primero es tener un <mask> elemento dentro del SVG y haga referencia al ID de ese elemento en el mask-image propiedad.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg><div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
La ventaja de este enfoque es que la máscara se puede aplicar a cualquier elemento HTML, no solo a una imagen. Desafortunadamente, Firefox es el único navegador que admite este enfoque.
Sin embargo, no todo está perdido, ya que para el escenario más común de enmascarar una imagen, podemos incluir la imagen en el SVG.
Enmascaramiento con un degradado
Usar un degradado CSS como máscara es una forma elegante de lograr un área enmascarada sin necesidad de tomarse la molestia de crear una imagen o SVG.
Un simple degradado lineal utilizado como máscara podría garantizar que la parte inferior de una imagen no sea demasiado oscura debajo de un título, por ejemplo.
Puede utilizar cualquiera de los tipos de degradado admitidos y ser tan creativo como desee. El siguiente ejemplo utiliza un degradado radial para crear una máscara circular para iluminar detrás del título.
Usando múltiples máscaras
Al igual que con las imágenes de fondo, puede especificar varias fuentes de máscara, combinándolas para obtener el efecto que desee. Esto es particularmente útil si desea utilizar un patrón generado con degradados CSS como máscara. Por lo general, estos usarán múltiples imágenes de fondo y, por lo tanto, se pueden traducir fácilmente en una máscara.
Como ejemplo, encontré un bonito patrón de tablero de ajedrez en Este artículo. El código, usando imágenes de fondo, se ve así:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;Para convertir esto, o cualquier otro patrón diseñado para imágenes de fondo, en una máscara, deberá reemplazar el background-* propiedades con el relevante mask propiedades, incluida la -webkit los prefijados.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;Hay algunos efectos realmente agradables aplicando patrones de degradado a las imágenes. Intente remezclar el Glitch y pruebe algunas otras variaciones.
Junto con el recorte, las máscaras CSS son una forma de agregar interés a las imágenes y otros elementos HTML sin necesidad de utilizar una aplicación de gráficos.
Foto por Julio Rionaldo en Unsplash.
