我在-webkit-mask-image的另一个div里面有一个带有background-image的div,因为在这种情况下border-radius在WebKit浏览器上不起作用.
如果我将一个Box-shadow设置为父div,它会显示在Firefox中但不会显示在Chrome中.如何覆盖-webkit-mask-image以便我也可以使用Box-shadow？
这是一个工作示例(在Firefox和Chrome中打开链接以查看区别)：http://jsfiddle.net/RhT3e/3
解决方法
您遇到的问题是使用-webkit-mask-image剪切了Box-shadow,因为该选项会剪切包括Box-shadow元素在内的任何内容.
解决方案
使用蒙版图像作为蒙版图像下显示的另一个元素,以便您可以使用其形状渲染阴影.为此,我们必须知道最初被屏蔽的图像的宽度和高度.如果您不知道图像大小或它是否动态,您可以使用JavaScript.
我们面临的问题是我们不能使用盒子阴影,因为它会渲染一个与阴影形状不匹配的盒子阴影.
盒子阴影不会在形状周围呈现
相反,我们将尝试使用阴影滤镜来模拟它.
我更喜欢使用相同大小的div来包裹被遮罩的图像,并且具有遮罩图像的背景图像.这就是它的样子.
HTML
<div class="image-container">
<img class="wrap-image" src="<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.75));
-moz-filter: drop-shadow(1px 1px 4px rgba(0,0.75));
-ms-filter: drop-shadow(1px 1px 4px rgba(0,0.75));
-o-filter: drop-shadow(1px 1px 4px rgba(0,0.75));
}
#wrap-image {
mask: url("URL of Mask Image");
-webkit-mask-Box-image: url("URL of Mask Image");
}
