背景模糊 - CSS

Question

你好我试图让这个背景模糊这样的图像，所以我想知道我是否可以只使用CSS3或者我需要使用Javascript＆amp; 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

<?xml version="1.0"?>
<xs:schema xmlns="test" xmlns:xs="http://www.w3.org/2001/XMLSchema" targetNamespace="test" elementFormDefault="qualified">

    <xs:element name="real_node" type="RealNode"/>




    <xs:complexType name="RealNode">
            <xs:annotation>
                    <xs:documentation source="Name" xml:lang="EN">TestName</xs:documentation>
                    <xs:documentation source="Type" xml:lang="EN">TestType</xs:documentation>
            </xs:annotation>
            <xs:sequence>
                    <xs:element name="Elem2" type="Type2" minOccurs="1">
                            <xs:annotation>
                                    <xs:documentation source="Name3" xml:lang="EN">TestName3</xs:documentation>
                                    <xs:documentation source="Type3" xml:lang="EN">TestType3</xs:documentation>
                            </xs:annotation>
                    </xs:element>
                    <xs:element name="Elem4" type="Type4" maxOccurs="99"/>
            </xs:sequence>
    </xs:complexType>

    <xs:simpleType name="Type2">
            <xs:restriction base="xs:string">
                    <xs:pattern value="[A-Z]{9,9}"/>
            </xs:restriction>
    </xs:simpleType>

    <xs:simpleType name="Type4">
            <xs:annotation>
                    <xs:documentation source="Name5" xml:lang="EN">TestName5</xs:documentation>
                    <xs:documentation source="Type5" xml:lang="EN">TestType5</xs:documentation>
            </xs:annotation>
            <xs:restriction base="xs:string">
                    <xs:pattern value="[A-Z]{7,9}"/>
            </xs:restriction>
    </xs:simpleType>

</xs:schema>

模糊元素背后

您可以使用CSS3背景滤镜获得此结果：

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

Answer 2

您可以使用background-attachment:fixed;并在blured容器中设置也，background-attachment可以在同一位置设置两个bg，其中一个可以模糊。

示例使用伪而不是div：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;