12

我background-image在另一个 div 里面有一个 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

4

2 回答 2

25

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

解决方案

使用蒙版图像作为蒙版图像下方显示的另一个元素，以便您可以使用其形状来渲染阴影。为了做到这一点，我们必须知道最初被遮罩的图像的宽度和高度。如果您不知道图像大小或者它是动态的，您可以使用 JavaScript。

我们面临的问题是我们不能使用box-shadow，因为它会渲染一个与遮罩形状不匹配的盒子阴影。

box-shadow不会在形状周围呈现

<code>box-shadow</code> 不会在形状周围呈现

相反，我们将尝试使用drop-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。

于 2013-10-30T22:25:45.717 回答
0

感谢那。它真的帮助了我。我不得不补充：

mask-image: url("URL of Mask Image");
mask-size: 100%;

让它在 Edge 中正确渲染。

于 2021-02-25T01:05:36.220 回答