我目前面临着一个小问题,即该属性实现的“玻璃态射”效果之上的文本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);
}Run Code Online (Sandbox Code Playgroud)
<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 …Run Code Online (Sandbox Code Playgroud)