Question

如果我在父元素上使用transition，则CSS backdrop-filter在overflow:hidden上不起作用。

示例代码：

.image-wrapper {
   width: 200px;
   border-radius: 6px;
   position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(0px);
  transition-duration: .5s;
}

.image-wrapper:hover .overlay {
  backdrop-filter: blur(15px);
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
}

<h4>// overflow:hidden (transition not working)</h4>
<div class="image-wrapper" style="overflow: hidden">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

<h4>// overflow:visible</h4>
<div class="image-wrapper">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
  <div class="overlay"></div>
</div>

示例视频：https://take.ms/fo80F

Answer 1

真正的罪魁祸首似乎是ClientsParComponent。

听起来像个错误，我找不到一个（尽管有很多相关，因为整个背景过滤器功能在实现和规格方面仍然充满错误），因此您可能想直接向它报告the ones that can do something about it。

请注意，解决方法是使用剪切路径而不是此边界半径：

border-radius

.image-wrapper {
  width: 200px;
  position: relative;
  line-height: 0
}
.clip-me {
  clip-path: inset(0px 0px round 6px 6px);
}
  
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(0px);
  transition-duration: .5s;
}

.image-wrapper:hover .overlay {
  backdrop-filter: blur(15px);
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
}

Answer 2

出于两个原因，我建议简化代码，如下所示。我相信它可以实现您想要的功能，并且跨浏览器更兼容-因为Firefox当前不支持backdrop-filter。

.image-wrapper {
   width: 200px;
   border-radius: 6px;
   position: relative;
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
  filter: blur(0);
  transition-duration: .5s;
}

.image-wrapper img:hover {
  filter: blur(15px);
}

<h4>// overflow:hidden (transition is now working)</h4>
<div class="image-wrapper" style="overflow: hidden">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>

<h4>// overflow:visible</h4>
<div class="image-wrapper">
  <img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>

过渡是否可以与背景滤镜一起使用？

2 个答案: