相关疑难解决方法(0)

如何使CSS玻璃/模糊效果适用于叠加层？

我在半透明叠加div上应用模糊效果时遇到问题.我希望div背后的一切都模糊不清,像这样:

这是一个不起作用的jsfiddle:http://jsfiddle.net/u2y2091z/

任何想法如何使这项工作？我希望尽可能保持简单并使其成为跨浏览器.这是我正在使用的CSS:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Run Code Online (Sandbox Code Playgroud)

html css blur css3 css-filters

Cha*_*son

2017 09-28

76
推荐指数

8
解决办法

20万
查看次数

使用 CSS 'backdrop-filter:blur' 在 Chrome 中渲染/闪烁/故障问题

我确实面临使用背景过滤器的渲染问题：blur(12px); 在 MacOS Mojave 上的 Chrome 76 中。每当我开始将鼠标悬停在 Chrome 中打开的选项卡上时，使用背景过滤器的 div 开始闪烁，并且 div 被细分为具有不同颜色的较小矩形，并由带有阴影的水平线分割。

我不知道这是渲染问题、故障、溢出问题还是只是 Chrome 中的错误。

这是小提琴。

我已经尝试过以下变体：

变换：translateZ(0);
背面可见性：隐藏；
溢出：隐藏；
保证金：0
将改变：顶部；
位置：静态；

似乎没有任何效果。

最小示例：

<html>
<head>
</head>

<body>
    <div id="articleViewOverlay" class="articleViewOverlay">
    </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

.articleViewOverlay {
    position: fixed;
    width: 200px;
    height: 200px;
    border-style: dashed;
    backdrop-filter: blur(12px);
    background-color: rgba(125, 125, 125, 0.4); 
    margin: 0; 
    overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

html css macos google-chrome

Geo*_*org

2019 09-01

6
推荐指数

1
解决办法

3015
查看次数