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;
  }
}

这是一个显示错误的codepen。（发生在铬）

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 );
}

Answer 2

或者。只需包裹背景图像并为该元素的变换添加动画效果。模糊那个动画元素的孩子。

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

<强> HTML DIV 。包裹 div（class =＆＃34; bg＆＃34; style =＆＃34; background：url（＆＃39; http://placekitten.com/300＆＃39;）no-repeat center center; background-size：cover;＆＃ 34）

<强> 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);
  }
}

父容器边缘模糊转换错误

2 个答案: