时间戳

首页 > 解决方案 > 背景过滤器不适用于溢出：隐藏在父级上

html - 背景过滤器不适用于溢出：隐藏在父级上

问题描述

我试图在 div 上使用背景过滤器（在这种情况下为模糊）只是为了发现溢出：隐藏属性阻止它应用。浏览器是 Chrome 78。

假设我在 div.block 中有一个 div.filter，它是 div.container 中的包装器。

div.container > div.block > div.filter

如果我对 .container 和 .block 应用溢出：隐藏，过滤器的效果会突然消失。此外，.block 的其他属性会阻止应用过滤器。

似乎溢出：隐藏在 .container 上会触发这种不稳定的行为。你们知道这里发生了什么吗？

此处演示：https ://codepen.io/marcel_pi/pen/VwYvmGv

请检查以下代码：

.container{
  overflow: hidden;  /* delete to resume normal behavior */
  border-radius: 20px;
}

.block{
  width: 400px;
  height: 400px;
  border: 4px solid black;
  background: linear-gradient(90deg, transparent 50%, rgba(152,47,138,.5) 50%) antiquewhite;
  background-size: 30px;
  font-weight: bold;
  
  /* the properties below prevent the filter from being applied once the overflow: hidden is applied to .container */
  
  border-radius: 20px; /* delete to resume normal behavior */
  overflow: hidden; /* delete to resume normal behavior */
  position: relative; /* delete to resume normal behavior */
}

.filter{
  position: absolute;
  top: 0;
  left: 205px;
  width: 230px;
  height: 230px;
  background: #42add77d;
  backdrop-filter: blur(6px); /* the blur filter */
  border-radius: 20px;
}
<div class="container">
  
  <div class="block">
    <div class="filter"></div>
  </div>

</div>

标签： htmlcss

解决方案

如果将过滤器 ( 0px) 应用于应用溢出属性的同一元素，它将起作用。

.container{
  overflow: hidden;  /* delete to resume normal behavior */
  border-radius: 20px;
}

.block{
  width: 400px;
  height: 400px;
  border: 4px solid black;
  background: linear-gradient(90deg, transparent 50%, rgba(152,47,138,.5) 50%) antiquewhite;
  background-size: 30px;
  font-weight: bold;
  
  /* the properties below prevent the filter from being applied once the overflow: hidden is applied to .container */
  
    -webkit-filter: blur(0px);
  border-radius: 20px; /* delete to resume normal behavior */
  overflow: hidden; /* delete to resume normal behavior */
  position: relative; /* delete to resume normal behavior */
}

.filter{
  position: absolute;
  top: 0px;
  left: 205px;
  width: 230px;
  height: 230px;
  background: #42add77d;
  backdrop-filter: blur(4px);
  border-radius: 20px;
}
<div class="container">
  
  <div class="block">
    <div class="filter"></div>
  </div>

</div>

你也可以在这里测试它..

推荐阅读