Question

我希望背景模糊，而背景的边缘不会模糊。我希望模糊的图像能够充分填充其容器的背景。

我目前的解决方案是：

HTML

<div class="wrapper">
  <div class="background"></div>
  <div class="text">Lorem Ipsum dolor sit</div>
</div>

CSS

.wrapper {
  display: block;
  position: relative;
  width: 240px;
  height: 300px;
  overflow: hidden;
  border: 1px solid blue;
}

 .wrapper .background {
   position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://photo.elsoar.com/wp-content/images/Strawberry-afbeelding.jpg');
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.wrapper .text {
  position: absolute;
  display: block;
  top: 40%;
  left: 0;
  width: 100%;
  height: 60%;
  background: rgba(0,130,120,0.5);
  color: white;
  padding: 10px;
  font-size: 2rem;
}

如何获得“没有模糊的边缘”，但是模糊的图像填满整个“蓝色”框？

非常感谢。

工作样本：

http://codepen.io/anon/pen/alnDr

Answer 1

我能想到的唯一解决方案是使用clip属性，但它非常棘手，它要求元素具有绝对位置。在这种情况下，剪裁的width应该小于元素的宽度，如果它等于元素的宽度，它就不能剪切模糊（足够奇怪）。所以我们必须将它设置为比元素的宽度小1px，但边界将被破坏，因此我们必须使用box-shadow来模仿边框。您还可以包装一些元素，并为外部元素设置border：

.wrapper {
  display: block;
  position: absolute;
  width: 240px;
  height: 300px;
  overflow: hidden;  
  box-sizing:border-box;
  clip:rect(0,239px,300px,0);
  box-shadow:0 0 0 1px blue inset,
             -2px 0 0 0 blue inset;

}

Updated Demo.

如果div周围的背景是纯色，也可以使用另一个解决方案，在这种情况下，您可以使用box-shadow覆盖外部模糊，如下所示：

.wrapper {
  display: block;  
  width: 240px;
  height: 300px;
  overflow: hidden;
  position:relative;
  border:1px solid blue;
  box-shadow:0 0 0px 10px white; /* the surrounding color is white */
}

请注意，内部模糊图像应设置为z-index:-1，以便它位于box-shadow之后，否则盒子阴影无法覆盖外部模糊。

如何修复css模糊背景模糊边缘

1 个答案:

Updated Demo.

Demo 2