html - Chrome 中的掩码结合了绝对位置、 overflow hidden 、z-index 和 border-radius

Question

我正在尝试实现一种效果，其中我将拥有带有背景图像和内部内容的 div。此内容应该是具有相同图像但模糊的 flex-positioned div(同时保持其与父级的相对位置)。

在寻求拯救的过程中，我发现某些 CSS 规则组合可以产生这种效果，但仅限于 Chrome。

.container {
  width: 320px;
  height: 240px;
  position: relative; /* it is required */
  display: flex; /* it is required */
  background: url(https://loremflickr.com/cache/resized/4848_46406748211_5572c760e0_320_240_nofilter.jpg);
}

.mask {
  z-index: 1; /* it is required */
  overflow: hidden; /* it is required */
  width: 150px;
  height: 150px;
  border-radius: 1px; /* it is required */
}

.element {
  background: url(https://loremflickr.com/cache/resized/4848_46406748211_5572c760e0_320_240_nofilter.jpg);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: blur(5px);
}


<div class="container">
  <div class="mask">
    <div class="element"></div>
  </div>
</div>

https://jsfiddle.net/39um580g/16/

Chrome/Chrome 移动版:

火狐:

Safari :

这太荒谬了。有没有办法让这个解决方案跨浏览器？

Moorthy G 的回答:

假设我的积木放在右侧。 Chrome 版本的当前行为如我所愿:

添加任何类型的转换都会使 .mask 成为相对的，因此它会破坏预期的效果:

Answer 1

添加 clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 100% 0); 剪辑你的面具。

.mask {
  z-index: 1; /* it is required */
  overflow: hidden; /* it is required */
  width: 150px;
  height: 150px;
  border-radius: 1px; /* it is required */      
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 100% 0); /* Fix for Firefox*/
}