▷Cuadro-sombra en elemento con -webkit-mask-image ✔️ Foro Ayuda 【 2024 】

Solución:

El problema que tienes es que el box-shadow está siendo recortado con el -webkit-mask-image ya que esa opción recorta cualquier cosa, incluido el box-shadow elemento.

La solución

Use la imagen de la máscara como otro elemento que se muestra debajo de la imagen enmascarada para que pueda usar su forma para representar una sombra. Para hacer esto, debemos conocer el ancho y el alto de la imagen que originalmente se está enmascarando. Si no conoce el tamaño de la imagen o si es dinámica, puede usar JavaScript.

El problema que enfrentamos es que no podemos usar box-shadow ya que generará una sombra de caja que no coincidirá con la forma de la máscara.

los box-shadow no se renderiza alrededor de la forma

La <code data-lazy-src=

box-shadow no se representa alrededor de la forma.”>

En lugar de, intentaremos emularlo usando un drop-shadow filtrar.

Prefiero envolver la imagen que se enmascara con un div del mismo tamaño y tiene una imagen de fondo de la imagen de la máscara. Así es como se verá.

HTML

<div class="image-container">
    <img class="wrap-image" src="https://foroayuda.es/<Original Image URL>" id="wrap-image">
</div>

CSS

.image-container {
    width: <Original Image Width>;
    height: <Original Image Width>;
    background-size: 100%;
    background-image: url(URL of Mask Image);
    -webkit-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -moz-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -ms-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -o-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
}

#wrap-image {
    mask: url("URL of Mask Image");
    -webkit-mask-box-image: url("URL of Mask Image");
}

Aquí hay un JSFiddle.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Cuadro-sombra en elemento con -webkit-mask-image

Solución:

La solución

Utiliza Nuestro Buscador

Preguntas Relacionadas: