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

概述我有一个背景图像的div.背景图像css设置如下： .resPic1 { background: url(../css/images/residentialpic1.jpeg) center; background-size: contain;} 我想知道的是,如果有一种方法只能模糊重复的图像(在我的图片中突出显示的蓝线之外的重复图像),任何帮助表示赞赏！ 如果你有一个模糊的图像 我有一个背景图像的div.背景图像CSS设置如下：

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

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

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

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

如果你不这样做,之前的一点::之前的Hack也可以做到：

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

总结

以上是内存溢出为你收集整理的HTML – 只在背景中模糊重复的图像？全部内容，希望文章能够帮你解决HTML – 只在背景中模糊重复的图像？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。