Question

我有一些图像块，当我悬停块时，他们的子图像应该模糊并使用小的过渡效果进行缩放。它在firefox中完美运行，但是在使用WebKit浏览器时，模糊图像的边缘会出现一个奇怪的阴影。

我在another question搜索并获得了一个解决方案，在那里他们已经使用-webkit-transform: translate3d(0, 0, 0);来解决问题。但是当我应用translate3d(0, 0, 0)时，阴影不会隐藏，并且像box-shadow inset一样可见，直到鼠标离开。检查下面的小提琴和代码

Fiddle

.grid {
    width: 40%;
    float: left;
    padding: 10px;
    background-color: red;
    figure {
      margin: 0;
      opacity: 1;
      filter: alpha(opacity=100);
      overflow: hidden;
      -webkit-transition: all, 0.3s, linear;
      -o-transition: all, 0.3s, linear;
      transition: all, 0.3s, linear;
      img {
        max-width: 100%;
        min-width: 100%;
        -webkit-transition: all, 0.3s, linear;
        -o-transition: all, 0.3s, linear;
        transition: all, 0.3s, linear;
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        filter: blur(0);
        -webkit-transform: scale(1) translate3d(0, 0, 0);
        -moz-transform: scale(1) translate3d(0, 0, 0);
        -ms-transform: scale(1) translate3d(0, 0, 0);
        -o-transform: scale(1) translate3d(0, 0, 0);
        transform: scale(1) translate3d(0, 0, 0);
      }
    }
    &:hover {
      figure {
        opacity: 0.55;
        filter: alpha(opacity=55);
        img {
          -webkit-filter: blur(8px);
          -moz-filter: blur(8px);
          filter: blur(8px);
          -webkit-transform: scale(1.06) translate3d(0, 0, 0);
          -moz-transform: scale(1.06) translate3d(0, 0, 0);
          -ms-transform: scale(1.06) translate3d(0, 0, 0);
          -o-transform: scale(1.06) translate3d(0, 0, 0);
          transform: scale(1.06) translate3d(0, 0, 0);
        }
      }
    }
  }

是否有任何解决方案可以在WebKit浏览器中删除阴影效果。帮助将不胜感激。

Answer 1

不是网格是数字的背景，而是将其作为边框。

将数字的z-index设置为负数，使其位于网格下，并设置边距以使其与红色边框重叠，并且出血边缘不再可见。

即使你没有设置负边距，效果也要好得多，因为现在边框会变成白色而不是红色。

* {
  padding: 0;
  bottom: 0;
}
.grid {
  width: 40%;
  float: left;
  padding: 0px;
  border: solid 10px red;
}
.grid figure {
  margin: -10px;
  opacity: 1;
  overflow: hidden;
  transition: all, 0.3s, linear;
  z-index: -1;
  position: relative;
}
.grid figure img {
  max-width: 100%;
  min-width: 100%;
  transition: all, 0.3s, linear;
  -webkit-filter: blur(0);
  filter: blur(0);
  transform: scale(1) translate3d(0, 0, 0);
}
.grid:hover figure {
  opacity: 0.55;
}
.grid:hover figure img {
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  filter: blur(8px);
  transform: scale(1.06) translate3d(0, 0, 0);
}

<aside class="grid">
  <figure>
    <img src="http://lorempixel.com/500/500/sports/1/" alt="">
  </figure>
</aside>
<aside class="grid">
  <figure>
    <img src="http://lorempixel.com/500/500/sports/2/" alt="">
  </figure>
</aside>

奇怪的暗影效果出现在CSS Blur上

1 个答案: