小编Tom*_*m R的帖子

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

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

html css

5
推荐指数
1
解决办法
2210
查看次数

标签 统计

css ×1

html ×1