html - 背景模糊上的文本似乎有点模糊（html/css）

Question

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

并排比较：https ://imgur.com/a/Sq0Unq7 。

如您所见，视口宽度之间的差异可以小到 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>

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

标签： htmlcss