html - 父容器边缘模糊过渡错误

Question

我正在尝试模糊包装 div 内的背景 Div。

当我过渡子 div(被模糊的 div)的不透明度时，模糊似乎在过渡期间传播到父元素，导致羽化边缘，然后在之后自行移除。

HTML/ Jade

div
  div( class="bg" style="background: url('http://placekitten.com/300') no-repeat center center; background-size: cover;")

SCSS

div  {
  cursor: pointer; cursor: hand;
  .bg{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    transition: 550ms ease-out;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    transform: scale(1.1);
    }
}
div {
  position: relative;
  height: 500px; width: 500px;
  overflow: hidden;
  background-color: rgba( 0, 0, 0, 1);
}
div:hover {
  .bg {
    opacity: .6;
  }
}

这是一个显示错误的代码笔。 (发生在 chrome 中)

http://codepen.io/LAzzam2/pen/kXdwWp

有人知道解决这个问题的方法吗？谢谢!

Answer 1

看起来 SVG 过滤器可能是一个很好的解决方案-

http://codepen.io/LAzzam2/pen/pbmAJB

HTML

<div class="wrapper">
  <div class="bg">
    <svg id="svg-image">
        <image x="0" y="0" id="svg-image" width="100%" height="100%" xlink:href="http://placekitten.com/300" />

        <filter id="blur-effect-1">
            <feGaussianBlur stdDeviation="2" />
        </filter>
    </svg>
  </div>
</div>

CSS

#svg-image-blur { height: 220px; width: 320px; }

.bg {
  transition: all 250ms ease-out;
  opacity: 1;
  position: absolute;
  top: 50%; left: 50%;
  height: 100%; width: 100%;
  transform: translate( -50%, -50%) scale( 1.05 );
  -webkit-backface-visibility: hidden;
}

.wrapper {
  cursor: pointer; cursor: hand;
  overflow: hidden;
  height: 450px; width: 450px;
  position: relative;
  background-color: black;
}

#svg-image { 
  height: 100%; width: 100%;
  filter:url(#blur-effect-1); 
}

.bg:hover {
  opacity: .6;
  transform: translate( -50%, -50%) scale( 1.15 );
}