CSS 背景过滤器：Safari 和 Chrome 中的模糊渲染问题答案

【问题标题】：CSS backdrop-filter:blur in Safari and Chrome render problemCSS 背景过滤器：Safari 和 Chrome 中的模糊渲染问题
【发布时间】：2020-12-03 00:55:29
【问题描述】：

body{
  background: #555;
}
#container{
  height: 150px;
  width: 150px;
  background-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}
#content{
  height: 150px;
  width: 150px;
  background-color: rgba(0,0,0,0.5);
  margin:50px;
  position: absolute;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

<div id="container">
  <div id="content"></div>
</div>

This is on Safari（这是我想要的，也应该是）

This is on Chrome（这是错误的。）

这里有问题。如果一个对象的父对象和它本身具有背景过滤器属性，这在 Safari 浏览器中可以正常工作，但不会将此 CSS 属性应用于 chrome 子对象。或不渲染。这是一个错误吗？如果是错误我该如何解决？感谢您的帮助。

(!!!) 编辑：造成的混乱破坏了一切。该解决方案对简单对象有效，但对复杂对象无效。

【问题讨论】：

这能回答你的问题吗？ Backdrop filter not working with overflow: hidden on parent
谢谢，但这不是我问题的答案，因为我不希望它被溢出隐藏。会有一个像图片中的形状，两个对象都有一个背景过滤器。这是 safari 示例中正确的一个，但 chrome 浏览器存在问题。不对子对象应用过滤器。

标签： html css

【解决方案1】：

backdrop-filter 在 chrome 中的支持很差，有一种解决方法可以使用 CSS 伪元素 :after 或 :before ：

body{
  background: #555;
}
#container{
  height: 150px;
  width: 150px;
  background-color: rgba(255,255,255,0.5);
  position: relative;
}

#container:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#content{
  height: 150px;
  width: 150px;
  background-color: rgba(0,0,0,0.5);
  margin:50px;
  position: absolute;
}


#content:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

<div id="container">
  <div id="content"></div>
</div>

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        body{
            background: #555;
        }
        #container{
            height: 150px;
            width: 150px;
            background-color: rgba(255,255,255,0.5);
            position: relative;
        }
        #container::before {
            width: 100%;
            height: 100%;
            backdrop-filter: blur(10px);
        }
        #content{
            height: 150px;
            width: 150px;
            background-color: rgba(0,0,0,0.5);
            margin:50px;
            position: absolute;
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body>
<div id="container">
    <div id="content"></div>
</div>
</body>
</html>

【讨论】：

非常感谢您的回答和关注。需要将 content 属性与 before 和 after 一起使用。这再次导致混乱。使用边框或边框半径时可能会出现一些渲染错误。