css 有没有一种方法可以创建一个模糊效果，而不使用backdrop-filter：模糊，导致 Flink ？

pbossiut 于 12个月前发布在 Flink

关注(0)|答案(3)|浏览(240)

我正在做一个复杂的设计，涉及到多个模糊效果，一个div应用了模糊效果，后面的另一个div需要模糊。我一直在网上搜索，但找不到答案
当前的过滤器**backdrop-filter：blur（）;**在非旗舰手机上导致 Flink /毛刺，我相信没有人真的想通过他们的工作创造一个糟糕的用户体验。
有没有前端开发人员找到了解决方案或遇到过这样的经验？任何指导都将意味着很多！

css

来源：https://stackoverflow.com/questions/77637109/is-there-a-way-to-create-a-blur-effect-without-using-backdrop-filter-blur-that

3条答案

按热度按时间

0tdrvxhp1#

尝试通过CSS will-change: filter;显式强制GPU渲染
Will Change
如果使用变换use it as 3D，而不是2D

赞(0）回复(0）举报 12个月前

fwzugrvs2#

我也有一个模糊效果的问题，但我发现的一个解决方案是用途：在你的backdrop-filter: blur(5px)之前使用：-webkit-backdrop-filter: blur(5px)，显然这修复了移动的浏览器和css之间最奇怪的交互。

赞(0）回复(0）举报 12个月前

lf3rwulv3#

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect</title>
<style>
  .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('your-background-image.jpg') center/cover;
            filter: blur(10px);
            z-index: -1;
        }

        .content {
            position: relative;
            z-index: 1;
            padding: 20px;
            color: white;
            font-size: 20px;
        }
</style>
</head>
<body>
<div class="container">
<div class="background"></div>
<div class="content">
 <p>Your content goes here.</p>
  </div>
    </div>
</body>
</html>

字符串

赞(0）回复(0）举报 12个月前

我来回答

css 有没有一种方法可以创建一个模糊效果，而不使用backdrop-filter：模糊，导致 Flink ？

3条答案

相关问题

热门标签

最新问答