我有一个固定高度的父 div，以及一个延伸到父 div 之外的子 div。在 Chrome 75 中，这会导致在预期区域之外应用父 div 的背景滤镜效果。 IOS/Safari 不会发生这种情况。
试一试:https://jsfiddle.net/7grL6t0n/
Firefox 或 Edge 根本不支持背景过滤器。不确定其他平台/浏览器。
请注意:您需要在 chrome://flags 中激活“实验性 Web 平台功能”才能看到模糊效果。
这是 Chrome 错误还是我做错了什么。如果这是一个错误，是否有一些 CSS 解决方法可以解决这个问题？
body {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/USAF-1951.svg/1024px-USAF-1951.svg.png);
}
.parent {
background-color: rgba(255, 0, 0, 0.5);
height: 100px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.child {
background-color: rgba(0, 255, 0, 0.5);
width: 300px;
height: 300px;
}<body>
<div class="parent">
Parent with fixed height, red background and "blur" backdrop filter, which should appear within the parent, but is moved down by the child.
<div class="child">
Child with green background, extending outsite of parent.
</div>
</div>
</body>最佳答案
这是 Chrome 75 中的一个错误。背景滤镜功能已在 Chrome 76 中正式推出，并且此错误(以及许多其他错误)已在 76 版本中修复。
关于html - CSS 背景滤镜模糊效果在 Chrome 中未对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57287168/