Box-shadow sull'elemento con -webkit-mask-image

Question

Ho un div con background-image all'interno di un altro div con -webkit-mask-image, perché border-radius non funzionava sui browser WebKit in questo caso.

Se si imposta uno box-shadow sul div genitore, viene visualizzato in Firefox ma non in Chrome. Come posso ignorare lo -webkit-mask-image così posso usare anche box-shadow?

Ecco un esempio di lavoro (aprire il link in Firefox e Chrome per vedere la differenza): http://jsfiddle.net/RhT3e/3

Answer 1

Il problema vostro avere è che il box-shadow si sta ritagliato con l'-webkit-mask-image da quel clip opzione qualsiasi cosa, compreso il box-shadow elemento.

La soluzione

Utilizzare l'immagine maschera come un altro elemento visualizzato sotto l'immagine mascherata in modo da poter utilizzare la sua forma per rendere un'ombra. Per fare questo dobbiamo conoscere la larghezza e l'altezza dell'immagine che è stata mascherata in origine. Se non conosci la dimensione dell'immagine o se è dinamica puoi usare JavaScript.

Il problema dobbiamo affrontare è che non possiamo usare box-shadow poiché renderà un'ombra scatola che non corrisponderà la forma della maschera.

Il box-shadow non rendono intorno alla forma

---

Invece, cercheremo di emulare utilizzando un filtro drop-shadow.

Preferisco avvolgere l'immagine mascherata con un div con le stesse dimensioni e un'immagine di sfondo dell'immagine della maschera. Questo è come sarà.

HTML

<div class="image-container"> 
<img class="wrap-image" 
src="Origional 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"); 
} 

Here's a JSFiddle