css - 如何在CSS中修复模糊背景上的模糊边缘

Question

我想要一个模糊的背景，而这个背景的边缘不应该是模糊的。我希望模糊图像完全填满其 paaernt 容器的背景。

我目前的解决方案是:

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 后面，否则 box-shadow 不能'不要覆盖外部模糊。

Demo 2