Öğe -webkit-mask-image öğesindeki kutu-gölge

Question

ile başka bir div içinde background-image ile bir div sahibim, çünkü border-radius bu durumda tarayıcılarda çalışmıyordu.

Ebeveyn divuna box-shadow ayarlıyorum, Firefox içinde görünür, ancak Chrome içinde değil. -webkit-mask-image'u nasıl geçersiz kılabilirim, böylece box-shadow'u kullanabilir miyim? İşte

bir çalışma örneği (farkı görmek Firefox ve Chrome bağlantıyı açmak) 'dir: http://jsfiddle.net/RhT3e/3

Answer 1

senin sahip box-shadow dahil bu seçeneği klipler şey beri -webkit-mask-image ile kırpılan olmasıdır sorun box-shadow öğesi.

Çözüm

kullanın bunu bir gölge oluşturmak için şekildir kullanabilmesi maskeli resmin altında görüntülenen bir başka unsur olarak maske görüntü

. Bunu yapmak için, orijinal olarak maskelenen görüntünün genişliğini ve yüksekliğini bilmeliyiz. Resim boyutunu bilmiyorsanız veya dinamikse JavaScript'i kullanabilirsiniz.

sorunu, box-shadow numaralı sorunu kullanamayacağımızdan, maskenin şekliyle eşleşmeyecek bir kutu gölgesi oluşturacağından. box-shadow

şekil

---

yerine etrafında kılmaz, bir drop-shadow filtre kullanarak bunu taklit etmeye çalışacaktır.

Aynı boyutta bir div ile maskelenen görüntüyü kaydırmayı ve maske görüntüsünün arka plan görüntüsünü içermeyi tercih ederim. Bu nasıl görüneceği gibi.

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