Chrome 中的掩码结合了绝对位置、溢出隐藏、z-index 和 border-radius

Question

我正在尝试实现一种效果，其中我将 div 带有背景图像和内部内容。此内容应使用相同的图像灵活定位 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 手机：

火狐：

野生动物园：

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

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*/
}

Answer 2

一种解决方案是使遮罩元素position:absolute，以便溢出可以按预期工作，然后您可以考虑调整background-position，同时调整元素的位置以纠正图像位置。

我使用了CSS变量来方便调整：

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

.mask {
  z-index: 1;
  overflow: hidden;
  width: 150px;
  height: 150px;
  top:var(--t,0);
  left:var(--l,0);
  position:absolute;
  border-radius: 50px;
}

.mask::before {
  content:"";
  display:block;
  background:var(--img) calc(-1*var(--l)) calc(-1*var(--t)); 
  width:100%;
  height:100%;
  filter: blur(5px);
}

<div class="container" style="--t:20px;--l:80px">
  <div class="mask">
  </div>
</div>

<div class="container" style="--t:90px;--l:0px">
  <div class="mask">
  </div>
</div>
<div class="container" style="--t:50px;--l:50px;--img:url(https://picsum.photos/320/240?image=1069)">
  <div class="mask">
  </div>
</div>

Chrome 中的掩码结合了绝对位置、溢出隐藏、z-index 和 border-radius

Mask in Chrome combining position absolute, overflow hidden, z-index and border-radius

html

css

google-chrome

image-masking

Moorthy G 的回答：