文本在背景模糊 (html/css) 上显得有点模糊

Question

我目前面临着一个小问题，即该属性实现的“玻璃态射”效果之上的文本backdrop-filter: blur()。在某些情况下，带有玻璃效果的 div 顶部的文本看起来有点模糊或其他什么。由于宽度可变，当文本跳到下一行时，似乎会发生这种情况。

并排比较：https://i.stack.imgur.com/CKuMm.jpg。

正如您所看到的，视口宽度之间的差异可以小至 1 像素。删除背景滤镜可以解决这个问题，但如果可能的话我想保留它。我已经在 Chrome 和 Edge（以及 Internet Explorer，但不支持背景过滤器属性）中对此进行了测试。两者结果相同。

这是“玻璃”div 的代码：

.glassback {
   height: auto;
   background: rgba(0, 0, 0, 0.55);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   backdrop-filter: blur( 4px );
   -webkit-backdrop-filter: blur( 4px );
   border-radius: 10px;
   padding: 25px;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

<div class="col-xl-3 col-lg-3 col-md-6 col-12 glassback">
    <h3 class="landingpage">FIND YOUR NEW HOME TODAY.</h3>
    <br>
    <p class="landingpage">We offer a wide variety of apartments and studios in cities like <b>Eindhoven</b>, <b>Tilburg</b> and <b>Arnhem</b>.</p>
    <p class="landingpage">Now the real question is:<br>where do <b>you</b> want to live?</p>
    <form action="" method="POST">
        <div class="row">                       
            <div class="col-10">
                <select name="cityselection" id="cityselection" class="form-control overflow">
                    <option class="overflow" value="all" selected>Eindhoven, Tilburg, Arnhem, &#39;s-Hertogenbosch...</option>
                    <option value="Eindhoven">Eindhoven</option>
                    <option value="Tilburg">Tilburg</option>
                    <option value="Arnhem">Arnhem</option>
                    <option value="sHertogenbosch">&#39;s-Hertogenbosch</option>
                    <option value="Amersfoort">Amersfoort</option>
                </select>
            </div>
            <div class="col-2 searchbutton">
                <button type="submit" class="btn btn-danger" name="search"><i class="fas fa-search"></i></button>   
            </div>                      
        </div>
    </form>
</div>

有人有任何线索吗？如果您需要更多信息，请询问！:)

Answer 1

这主要是由于浏览器引擎造成的，模糊字体效果可能会根据您的浏览器browser、div大小甚至浏览器的不同而有所不同render interpretation。仅供参考，此行为也会影响div绘图（例如具有边框半径的圆100%）。在这种情况下，边缘也可能变得模糊。

在所有这些混乱中，您有一个适当的解决方法：不要将 应用于backdrop-filter包含文本的 div，而是创建一个absolute具有效果的单独 div，并将其放置在文本或内容下方。这是您的代码的修复：

<div class="col-xl-3 col-lg-3 col-md-6 col-12 glassback">
    <div class="effect"></div>
    <h3 class="landingpage">FIND YOUR NEW HOME TODAY.</h3>
    <br>
    <p class="landingpage">We offer a wide variety of apartments and studios in cities like <b>Eindhoven</b>, <b>Tilburg</b> and <b>Arnhem</b>.</p>
    <p class="landingpage">Now the real question is:<br>where do <b>you</b> want to live?</p>
    <form action="" method="POST">
        <div class="row">                       
            <div class="col-10">
                <select name="cityselection" id="cityselection" class="form-control overflow">
                    <option class="overflow" value="all" selected>Eindhoven, Tilburg, Arnhem, &#39;s-Hertogenbosch...</option>
                    <option value="Eindhoven">Eindhoven</option>
                    <option value="Tilburg">Tilburg</option>
                    <option value="Arnhem">Arnhem</option>
                    <option value="sHertogenbosch">&#39;s-Hertogenbosch</option>
                    <option value="Amersfoort">Amersfoort</option>
                </select>
            </div>
            <div class="col-2 searchbutton">
                <button type="submit" class="btn btn-danger" name="search"><i class="fas fa-search"></i></button>   
            </div>                      
        </div>
    </form>
</div>

和CSS：

.glassback {
    height: auto;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 10px;
    padding: 25px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    position: relative;
}
.effect {
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

还有一个带有具体示例的片段：

<div class="col-xl-3 col-lg-3 col-md-6 col-12 glassback">
    <div class="effect"></div>
    <h3 class="landingpage">FIND YOUR NEW HOME TODAY.</h3>
    <br>
    <p class="landingpage">We offer a wide variety of apartments and studios in cities like <b>Eindhoven</b>, <b>Tilburg</b> and <b>Arnhem</b>.</p>
    <p class="landingpage">Now the real question is:<br>where do <b>you</b> want to live?</p>
    <form action="" method="POST">
        <div class="row">                       
            <div class="col-10">
                <select name="cityselection" id="cityselection" class="form-control overflow">
                    <option class="overflow" value="all" selected>Eindhoven, Tilburg, Arnhem, &#39;s-Hertogenbosch...</option>
                    <option value="Eindhoven">Eindhoven</option>
                    <option value="Tilburg">Tilburg</option>
                    <option value="Arnhem">Arnhem</option>
                    <option value="sHertogenbosch">&#39;s-Hertogenbosch</option>
                    <option value="Amersfoort">Amersfoort</option>
                </select>
            </div>
            <div class="col-2 searchbutton">
                <button type="submit" class="btn btn-danger" name="search"><i class="fas fa-search"></i></button>   
            </div>                      
        </div>
    </form>
</div>

.glassback {
    height: auto;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 10px;
    padding: 25px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    position: relative;
}
.effect {
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}