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

Posted 2023-03-05

【中文标题】只模糊背景中的重复图像？

【英文标题】：Only blur repeated image in background?

【发布时间】：2017-10-24 04:19:34

【问题描述】：

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

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

我想知道是否有办法仅模糊重复图像（我在我的图片）任何帮助表示赞赏！

【问题讨论】：

真的需要背景重复吗？

理想情况下是的，我删除了重复，但容器 div 似乎有点太空了，我不喜欢.. 不幸的是，将图像拟合到 div 将其拉伸太多@Swellar

是否可以添加两张背景图片，一张模糊，一张正常？您可以将第二张图像居中并将模糊的图像放在后面。不要以为只用一张图片就可以做到。

你知道图片尺寸吗？如果是这样，您也许可以使用 :before 和 :after

如果所有其他方法都失败了，我可能会选择@Syfer，这似乎是合理的。迈克尔，是的，我想我可以将尺寸设为静态

【参考方案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 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;
  

【参考方案2】：

一个小的解决方法，使用固定高度和两个不同的divs.. 虽然可能不推荐..

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;

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