带-webkit-mask-image的元素上的框阴影 [英] Box-shadow on element with -webkit-mask-image

问题描述

我在具有 -webkit-mask-image 的另一个div内有一个具有 background-image 的div，因为 border-radius 无法正常工作在这种情况下，是在 WebKit 浏览器上.

如果我将 box-shadow 设置为父div，它会显示在 Firefox 中，但不会显示在 Chrome 中.如何覆盖 -webkit-mask-image ，以便也可以使用 box-shadow ?

这是一个可行的示例(在 Firefox 和 Chrome 中打开链接以查看不同之处):.

I have a div with background-image inside another div with -webkit-mask-image, because border-radius was not working on WebKit browsers in this case.

If I set a box-shadow to the parent div, it shows up in Firefox but not in Chrome. How can I override the -webkit-mask-image so I can use box-shadow too?

Here is an working example (open the link in Firefox and Chrome to see the difference): http://jsfiddle.net/RhT3e/3

解决方案

The problem your having is that the box-shadow is being clipped out with the -webkit-mask-image since that option clips anything including the box-shadow element.

The Solution

Use the mask image as another element displayed under the masked image so you can use its shape to render a shadow. In order to do this, we must know the width and height of the image that is originally being masked. If you don't know the image size or if it's dynamic you can use JavaScript.

The problem we face is that we can't use box-shadow since it will render a box shadow which won't match the shape of the mask.

The box-shadow doesn't render around the shape

---

Instead, we will try to emulate it using a drop-shadow filter.

I prefer to wrap the image being masked with a div with the same size and has a background image of the mask image. This is what it will look like.

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");
}

Here's a JSFiddle.

这篇关于带-webkit-mask-image的元素上的框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！