Background Blur - CSS

Question

Xin chào tôi cố gắng để làm cho nền tảng này Blur như hình ảnh này vì vậy tôi muốn biết nếu tôi có thể làm điều đó chỉ sử dụng CSS3 hay tôi cần phải sử dụng Javascript & Jquery:
Và nếu tôi sẽ chỉ sử dụng css Làm thế nào để làm mờ được đáp ứng.

Đây mã đơn giản của tôi:

#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

Để làm mờ tất cả các nền

Bạn không thể dễ dàng đính kèm hiệu ứng vào hình nền. Bạn nên làm mờ nó bằng một phần mềm và đặt nó làm hình nền.

Bạn có thể có một nền mờ trong css với một đặt div đằng sau nội dung trang web yout, và làm mờ này div như thế: http://codepen.io/aniketpant/pen/DsEve

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

---

Blur đằng sau một yếu tố

Bạn có thể nhận kết quả này bằng bộ lọc phông nền CSS3:

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

Answer 2

bạn có thể sử dụng background-attachment:fixed; và đặt nó cũng trong container blured, background-attachment là có để đặt cả bg vào cùng một chỗ, người ta có thể được blured.

ví dụ với một giả thay vì thêm 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>