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

Question

我有一个带背景图片的div。背景图像css设置如下：

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

我想知道的是，是否有办法仅模糊重复的图像（我在我的网站突出显示的蓝线外的重复图像图片）任何帮助表示赞赏！

Answer 1

如果您的图片版本模糊，可以通过在元素上应用多个背景图片来实现：

＆＃13;

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

如果你没有，那么一点::before + ::after黑客也可以做到这一点：

＆＃13;

＆＃13;

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;
  }

＆＃13;

＆＃13;

＆＃13;

Answer 2

一个小的解决方法，使用固定的高度和两个不同的div ..虽然不建议使用..

＆＃13;

＆＃13;

body {
  padding: 0;
  margin: 0;
  background: white;
  height: 100%;
  width: 100%;
}

.blur-bg {
  height: 300px;
}

.bg {
  background-image: url('https://lh5.ggpht.com/6IV7BAcqjvjlbtYN27Dbh8-Khc5fEhJJOHxUYG7omxUoW_q8WDwqAeHvCWNwO7bTDg=h900');
  position: absolute;
  height: 299px;
  width: 100%;
  filter: blur(2px);
}

.content {
  position: relative;
  line-height: 1.5;
  color: white;
  text-align: center;
  width: 70%;
  background-image: url('https://lh5.ggpht.com/6IV7BAcqjvjlbtYN27Dbh8-Khc5fEhJJOHxUYG7omxUoW_q8WDwqAeHvCWNwO7bTDg=h900');
  background-size: cover;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6), 2px 2px 1px rgba(0, 0, 0, 0.6), 2px 2px 1px rgba(0, 0, 0, 0.6), 2px 2px 1px rgba(0, 0, 0, 0.6);
  font-size: 20px;
}

＆＃13;

<div class="blur-bg">
  <div class="bg">
  </div>
  <div class="content">
    This
    <br>is
    <br>a
    <br>sample
    <br>of
    <br>background
    <br>image
    <br>blurring
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;