元素上的框阴影与-webkit-mask-image

Question

我有一个div与background-image另一个div内-webkit-mask-image,因为在这种情况下border-radius不在WebKit浏览器上工作.

如果我将a设置box-shadow为父div,则会显示Firefox但不会显示Chrome.如何覆盖-webkit-mask-image我也可以使用box-shadow？

这是一个工作示例(打开链接Firefox并Chrome查看区别):http://jsfiddle.net/RhT3e/3

Answer 1

您遇到的问题是,由于该选项box-shadow会剪切-webkit-mask-image包括box-shadow元素在内的任何内容,因此会被剪切掉.

解决方案

使用蒙版图像作为蒙版图像下显示的另一个元素,以便您可以使用其形状渲染阴影.为此,我们必须知道最初被屏蔽的图像的宽度和高度.如果您不知道图像大小或它是否动态,您可以使用JavaScript.

我们面临的问题是我们无法使用,box-shadow因为它会渲染一个与阴影形状不匹配的盒子阴影.

在box-shadow不环绕形状呈现

我更喜欢使用相同大小的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,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");
}

这是一个JSFiddle.