css - 模糊图像导致从容器/div 外部吸收元素

Question

<分区>

Answer 1

这是因为模糊也会使边缘羽化。您可以使用伪元素将模糊图像叠加在图像之上，但由于显而易见的原因边缘不会模糊。

示例(点击“整页”按钮):

.blurimg {
  background: url(http://s15.postimg.org/4elomwgbv/luxvitae.jpg) no-repeat;
  width: 1500px;
  height: 1000px;
  position: relative;
}
.blurimg:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: inherit;
  -webkit-filter: blur(5px); 
  -moz-filter: blur(5px); 
  -o-filter: blur(5px); 
  -ms-filter: blur(5px); 
  filter: blur(5px);
}

body{
  background-color: green;
  margin: 0;
}

<div class="blurimg"> </div>