背景模糊 - 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>

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/