只在背景中模糊重复图像？

Question

我有一个背景图像的div.背景图像css设置如下:

.resPic1 {
    background: url(../css/images/residentialpic1.jpeg) center;
    background-size: contain;
}

我想知道的是,如果有一种方法只能模糊重复的图像(在我的图片中突出显示的蓝线之外的重复图像),任何帮助表示赞赏!

Answer 1

如果你有一个模糊的图像版本,你可以通过在你的元素上应用多个背景图像来实现它:

body {
  /* place the blurred image below the normal one */
  background-image:
    url("https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg"),
    url("http://dl.dropboxusercontent.com/s/z3icpq9rkrf4rac/blurred_10px_mermaid.png?dl=0");

  /* repeat only the blurred one */
  background-repeat: no-repeat, repeat;

  background-position: center, center;
  background-size: contain;
  width: 100vw;
  height: 100vh;
}

如果你不这样做,一点::before+ ::after黑客也可以做到:

body{
  width: 100vw;
  height: 100vh;
  margin: 0;
  }
body::before, body::after{
  content: "";
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg");
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  }
/* the blurred image */
body::before{
  content: "";
  background-repeat: repeat;
  filter: blur(3px);
  }
/* the clear image */
body::after{
  content: "";
  background-repeat: no-repeat;
  z-index: 1;
  }