父容器边缘模糊过渡错误答案

【问题标题】：Parent Container Edge Blur Transition Bug父容器边缘模糊过渡错误
【发布时间】：2016-08-23 06:56:54
【问题描述】：

我正在尝试模糊包装 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

有人知道有什么办法解决这个问题吗？谢谢！

【问题讨论】：

标签： html css webkit blur

【解决方案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 );
}

【讨论】：

【解决方案2】：

或者。只需包装背景图像并为该元素的变换设置动画。模糊该动画元素的子元素。

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

HTML div 。裹 div( class="bg" style="background: url('http://placekitten.com/300') 无重复中心 center; background-size: cover;")

CSS

div  {
  cursor: pointer; cursor: hand;
  .wrap {
    transition: all 250ms ease-out;
  }
  .bg{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    transition: 550ms ease-out;
    position: absolute;
    top: -10px; left: -10px;
    width: calc( 100% + 20px );
    height: calc( 100% + 20px );
    }
}
div {
  position: relative;
  height: 500px; width: 500px;
  overflow: hidden;
  background-color: rgba( 0, 0, 0, 1);
}
div:hover {
  .wrap {
    opacity: .6;
    transform: scale(1.5);
  }
}

【讨论】：