logo标签列表

背景模糊时文本看起来有点模糊（HTML/CSS）

htmlcss
5

我目前在处理一个文本覆盖在“玻璃效果”上面的轻微问题，这个效果是通过backdrop-filter: blur()属性来实现的。在一些情况下，覆盖在具有玻璃效果的div上方的文本似乎有点模糊或其他问题。当由于变量宽度而导致文本跳到下一行时，似乎会出现这种情况。

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

您可以看到，视口宽度之间的差异可能只有1像素。如果去掉背景过滤器，则可以解决此问题，但如果可能的话，我想保留它。我已在Chrome和Edge（以及Internet Explorer，但它不支持backdrop-filter属性）中进行了测试。两者表现相同。

这是“玻璃”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>

有人有线索吗？如果需要更多信息，请随时提问！：）

请分享完整的CSS代码。 - Eldshe
我也遇到了这个问题。你找到解决方法了吗？ - Shenald
你找到解决方案了吗？我也遇到了同样的问题。 - EthanNeedsHelpCoding
1个回答
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;
}

这里是一个具体示例的代码片段：

body {
  background-image: url('https://i.imgur.com/S57AcCZ.png');
  background-size: 100%;
  background-color: grey;
}
.container {
  position: relative;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: white;
  font-size: 20px;
}
.effect {
  backdrop-filter: blur(15px) saturate(100%);
  -webkit-backdrop-filter: blur(15px) saturate(100%);
  background-color: rgba(39, 39, 39, 0.15);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
<div class="container">
  <div class="effect"></div>
  <div class="content">
    here is my sharp text
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接