进一步缩放 CSS 背景封面属性

Question

我有一个启动图像，它通过 CSS 设置为包含 <div> 的背景。元素样式目前设置如下：

#splash{
    background: url('image');
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(5px);
}

这一切都很好，除了filter:blur(5px) 行。这会在此处显示的图像周围留下 5 像素的“软边缘”：

Example of soft edge on image

如果我可以进一步覆盖<div> 5px，我将实现相同的模糊效果并保持锐利的边缘。

我可以重新定位图像渲染点并“作弊”，但我想知道是否有更好的方法。

谢谢。

Answer 1

我玩了一下，发现了一个甚至不需要触摸 html 的有效解决方案。它通过:before 和:after 堆叠两个生成的元素来工作。它确实需要您将overflow: hidden; 添加到您的div#splash 中，否则模糊图像会超出容器边界，并且还需要position: relative; 或position: absolute; 才能使伪元素的绝对定位和“大小”起作用。

#splash {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 280px;
}
#splash:before {
  border: 5px solid white; // user the corresponding backgroundcolor of your page here
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}
#splash:after {
  background: url(http://lorempixel.com/200/280);
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  display: block;
  filter: blur(5px);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

<div id="splash"></div>

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