Question

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

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

它会产生div元素blur，但是我看到块的角落有白光，如果没有它们我怎么能blur effect？

Answer 1

以纯CSS方式移除模糊边缘的唯一方法是稍微缩放元素，然后将overflow: hidden添加到容器中剪切边缘：

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何在没有白光的情况下进行模糊效果？

1 个答案: