배경 흐림 효과 - CSS

Question

안녕하세요 나는 내가 단지 CSS3를 사용하여 수행 할 수 있는지 알고 싶습니다 있도록이 배경이 이미지처럼 흐리게 만들려고 아니면 자바 스크립트 & 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

모든 배경을 흐리게

배경 이미지에 효과를 쉽게 첨부 할 수 없습니다. 소프트웨어로 블러링하고 배경 이미지로 설정해야합니다.

당신은이 행해져 Yout 사이트 콘텐츠 뒤에 사업부의 배치와 CSS의 배경 흐림을 가지고,이 그런 div에 흐리게 할 수 있습니다 http://codepen.io/aniketpant/pen/DsEve

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

---

블러 요소

뒤에 CSS3 배경 필터로이 결과를 얻을 수 있습니다 :

,703,210

Answer 2

당신이 background-attachment 같은 자리에서 두 BG가 설정하는 것입니다, background-attachment:fixed;을 사용하고 Blured 등 용기에 도을 설정할 수 있습니다, 하나는 blured에서 할 수있다. 의사 대신 별도의 사업부와

예 :

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