时间戳

首页 > 解决方案 > Chrome 上的 CSS 模糊过滤器中断

html - Chrome 上的 CSS 模糊过滤器中断

问题描述

我遇到了不寻常的行为。请参阅下面的示例 gif。

在此处输入图像描述

如上所示，右侧的图像正确地对图像执行了缓出滤镜效果。其他图片没有。它会影响图像标题，它会隐藏，然后在完成过滤效果后，再次显示标题。

这只发生在 chrome 浏览器中。目前，我的 chrome 位于Version 70.0.3538.77 (Official Build) (64-bit).

我在 IE 和 FF 上都测试过，没有出现上述问题。

有小伙伴遇到过这个问题吗？如果是，您是如何解决这个问题的？

请参阅下面的示例源代码（.html 和 .css）

HTML

<nav class="navbar navbar-dark bg-primary text-white fixed-top">
    <a class="navbar-brand">{{ title }}</a>
</nav>
<button type="button" class="btn btn-danger btn-lg add-wish" (click)="openModal()"><i class="material-icons">add</i></button>
<div class="home">
    <div class="card-columns">
      <div class="card  border-light bg-dark text-white" *ngFor="let post of posts" (click)="openModal()">
        <img class="card-img" src="{{ post.picture }}" alt="Card image">
        <div class="card-img-overlay">
          <div class="media">
            <img class="align-self-center mr-3 rounded-circle" src="../../../assets/blank.jpg" alt="Generic placeholder image" style="width: 50px; height: 50px;">
            <div class="media-body">
              <h5 class="mt-0">{{post.text}}</h5>
              <p class="mb-0" >
                <span class="d-inline-block text-truncate" style="max-width: 13%;">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span>
              </p>
            </div>
          </div>
          <p class="card-text">Last updated 3 mins ago</p>
        </div>
      </div>
    </div>
</div>

CSS

img.card-img {
  opacity: 0.5;
  filter: blur(2px);
}

.card:hover > .card-img {
  opacity: 1;
  filter: blur(0px);
  transition: filter 1s ease-out;
  transition: opacity 1s ease-out;
}

标签： htmlcssbootstrap-4

解决方案

对于那些与我有同样不寻常问题的人。当我修复位于card. 之后，它解决了这个问题。

我真的不知道它为什么会破裂，但我仍在弄清楚。

推荐阅读