css - 没有白光如何做出虚化效果？

Question

我使用以下 CSS 属性来设置 blur 效果:

 -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);

它使 div 元素模糊，但我在 block 的 Angular 落看到白光，如果没有它们，我如何制作模糊效果？

Answer 1

以纯 CSS 方式去除模糊边缘的唯一方法是稍微缩放元素，然后在容器中添加 overflow: hidden 来剪裁边缘:

.container {
  overflow: hidden;
  border: 1px solid red;
  display: inline-block;
}

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  transform-origin: 50%;
  transform: scale(1.3);
}

<div class="container">
  <div class="blur">
    <img src="http://lorempixel.com/700/300" alt="">
  </div>
</div>

jsFiddle:https://jsfiddle.net/azizn/7v0mtfyn/