Arkaplan Blur - CSS

Question

Merhaba Ben sadece CSS3 kullanarak bunu yapabilirsiniz olmadığını bilmek istiyorum bu yüzden bu arka plan bu görüntü gibi Blur yapmaya ya da ben JavaScript & jQuery kullanmak gerekir:
Ve eğer ben Sadece css kullanacak. Bulanıklık nasıl yapılır? İşte

benim basit 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

tüm arka plan bulanıklık için

Arka plan görüntüsüne kolayca efekt ekleyemezsiniz. Bir yazılım ile onu bulanıklaştırmalı ve arka plan görüntüsü olarak ayarlamalısınız.

Sen yout site içeriği arkasında bir div yerleştirilmesi ile css bir bulanıklık arka plan var ve bu böyle div bulanıklık olabilir: http://codepen.io/aniketpant/pen/DsEve

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

---

Blur bir öğesi

arkasında Bu sonucu CSS3 arka filtre ile alabilirsiniz:

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

Answer 2

Eğer background-attachment aynı noktada hem bg orada ayarlamaktır, background-attachment:fixed; kullanıp blured kapta da ayarlayabilirsiniz, tek blured edilebilir. Bir sözde yerine ekstra div ile

örnek:

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