rozmycie tła - CSS

Question

Witam Staram się to rozmycie obrazu, tak jak to chciałbym wiedzieć, czy mogę to zrobić tylko przy użyciu CSS3 czy muszę używać Javascript & Jquery:
i gdybym użyje tylko css. Jak sprawić, by rozmycie było responsywne.

Oto mój prosty kod:

#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

Aby rozmyć cały tła

Nie można łatwo dołączyć efektu do obrazu tła. Powinieneś go zamazać za pomocą oprogramowania i ustawić jako obraz tła.

Można mieć rozmycie tła w CSS z wprowadzania div za yout zawartości witryny, a plama DIV tak: http://codepen.io/aniketpant/pen/DsEve

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

---

Blur za element

Możesz uzyskać ten wynik z filtrem tła CSS3:

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

Answer 2

można użyć background-attachment:fixed; i ustawić go także w blured pojemnika background-attachment jest tam ustawić zarówno bg w tym samym miejscu, można być blured.

przykład z pseudo zamiast dodatkowej 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>