Question

我有一个包含我的背景图像的div，背景图像设置为覆盖页面的100％宽度和高度。我的图像模糊不清。

问题是我最终在页面边缘有一个空白区域？

安迪的想法是我哪里出错了？感谢

的CSS：

#background {
    width: 100%;
    height: 100%;
    background-image: url('../images/drop.png');
    background-size: cover;
    position: fixed;
    -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);

}

body {
    font-size: 15px;
    color: #333331;
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

HTML：

<div id="background"></div>

Answer 1

如果你在谈论图像边缘上的白色渐变，这就是模糊的工作方式。

您可以通过将图像稍微扩散到窗口外来解决这个问题，例如：

{
    ...
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}

隐藏视口边缘外的那些白色空白。

Answer 2

出现白色羽毛效果是因为图像需要比容器大。但是，您不需要使用带有负边距或甚至背景div的位置，使用带有伪元素的简单transform: scale(1.1);会更好。

body {
  position: relative;
  overflow: hidden;
}
body:after {
  position: absolute;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background-image: url('../images/drop.png');
  background-size: cover;
  filter: blur(2px);
  transform: scale(1.1);
}
body .the-content {
  position: relative;
  z-index: 2;
}

模糊背景图像的div？

2 个答案: