2012-09-19 17 views
7

Tengo un div con background-image dentro de otro div con -webkit-mask-image, porque border-radius no funcionaba en los navegadores WebKit en este caso.Cuadro-sombra en elemento con -webkit-mask-image

Si configuro box-shadow en el div principal, aparece en Firefox pero no en Chrome. ¿Cómo puedo anular -webkit-mask-image para poder usar box-shadow también?

Aquí es un ejemplo de trabajo (abrir el enlace en Firefox y Chrome para ver la diferencia): http://jsfiddle.net/RhT3e/3

Respuesta

9

El problema que usted tenga es que el box-shadow está siendo recortada a cabo con la -webkit-mask-image ya que los clips de opciones de cualquier cosa, incluyendo la box-shadow elemento.

La solución

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

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

El box-shadow no los hace alrededor de la forma The <code>box-shadow</code> doesn't render around the shape


lugar, vamos a tratar de emular el uso de un filtro drop-shadow. The shape with a drop-shadow filter

Prefiero envolver la imagen que está siendo enmascarada con un div con el mismo tamaño y tiene una imagen de fondo de la imagen de la máscara. Esto es lo que se verá.

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

Cuestiones relacionadas