Question

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

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

除filter:blur(5px)行外，这一切都很好。这留下了一个5像素的软边缘＃34;图片周围显示：

Example of soft edge on image

如果我可以进一步覆盖<div> 5px，我将获得相同的模糊效果并保持清晰的边缘。

我可以重新定位图像渲染点和＆＃34;欺骗它＆＃34;一点，但我想知道是否有更好的方法。

感谢。

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

进一步扩展CSS背景封面属性

1 个答案: