背景模糊 - CSS

Question

你好，我想让这个背景模糊，就像这张图片一样，我想知道是否只能使用CSS3来实现，还是需要使用Javascript和Jquery：
如果只用CSS，如何使模糊效果适应响应式布局。

这是我的简单代码：

#bg{
  background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

#bg {
  background-position: center top;
  padding: 70px 90px 120px 90px;
}

#search-container {
  position: relative;
}

#search-bg {
  /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 99;
  /* Pull the background 70px higher to the same place as #bg's */
  /*background-position: center -70px;*/
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

#search {
  position: relative;
  z-index: 100;
  padding: 20px;
  background: rgba(34,34,34,0.75);
}
#search h2{
    color:#ffffff;
}

<div id="bg">
        <div id="search-container">
            <div id="search-bg"></div>
            <div id="search">
                <h2>Hello World</h2>
            </div>
        </div>
    </div>

- user7265692

Answer 1

模糊整个背景

你不能轻易地将效果附加到背景图像上。你应该使用软件将其模糊并设置为背景图像。

你可以在 CSS 中使用一个 div 放置在站点内容后面，然后像这样对该 div 进行模糊处理，从而实现模糊背景： http://codepen.io/aniketpant/pen/DsEve

<div class="background-image"></div>
<div class="content"> Your text </div>

---

元素后面的模糊效果

您可以使用CSS3背景滤镜来实现此效果:

https://webkit.org/blog/3632/introducing-backdrop-filters/

- Thomas Rbt

---

谢谢你帮助我。 - user7265692

没问题，请不要忘记检查我的答案，如果您认为它是一个好答案 :) （打勾的标志） - Thomas Rbt

Answer 2

你可以使用background-attachment:fixed;，并在模糊容器中同样设置它，background-attachment用于将两个背景设置在同一位置，其中一个可以被模糊。例如，使用伪元素而不是额外的div：

#bg {
  background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center top;
  padding: 70px 90px 120px 90px;
}

#search-container {
  position: relative;
}

#search-container:before {/* add same bg-image with same backgrounds values to match main container */
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 0;
  background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;/* make it match #bg position and size */
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

#search {
  position: relative;
  z-index: 1;
  padding: 20px;
  background: rgba(34, 34, 34, 0.5);
  display:flex;
}

#search h2 {
  color: #ffffff;
  margin:auto;
}

<div id="bg">
  <div id="search-container">
    <div id="search">
      <h2>Hello World</h2>
    </div>
  </div>
</div>

- G-Cyrillus

---

我认为你走在了正确的道路上，GCyrillus，但是为什么要在:before上设置background-image呢？这取决于你的分辨率，它看起来不正确。与其设置任何background-image，你可以将背景颜色设置为rgba值（或手动设置不透明度），从而实现更好的效果：https://jsfiddle.net/osou43hz/ - jas7457

@jas7457，您还需要在背景中使用相同的图像进行模糊处理。position:fixed用于两个背景，以便它们匹配在同一区域。如果只是透明度的问题，rgba()背景颜色就足够了，不需要伪元素。问题是仅在#search框所在的位置模糊背景。您的fiddle没有模糊主容器的背景图像;) // 只是为了玩一下做了一个codepen：http://codepen.io/gc-nomade/pen/PpVzRz - G-Cyrillus

调整窗口大小使其小于700像素，您将会发现您的解决方案不再有效。 - jas7457

@jas7457 用哪个浏览器？这是我在火狐浏览器中看到的 https://i.stack.imgur.com/mVRGg.jpg - G-Cyrillus