Bir div öğesi için bulanık arka plan

Question

Resim kitaplığı yapıyorum. İçimde bir görüntü tuttuğum bir div var. Şimdi div'in arka planla aynı görüntüye sahip olmasını ama bulanık olmasını istiyorum. Genel CSS3 bulanıklaştırma seçeneğini kullandım, ancak tüm alt öğeler de bulanıklaşıyor (benim durumumda). Javascript için yeni, bu yüzden basit bir kod isterim.

Answer 1

Sorunuz bir şey olursa daha fazla CSS sorusudur. Ne yapıyorsun tahmin ediyorum geçerli:

HTML:

CSS

<div class="parentElement"> 
    <div class="child"></div> 
</div> 

:

.parentElement { filter: blur(15px); } 

Veya JS: Bu arka plan yanı bulanık olacaktır

document.getElementsByClassName("parentElement")[0].style.filter = "blur(15px)"; 

parentElement öğesindeki tüm öğeler.

iyi çözüm yalnızca arka için parentElement içine ayrı bir çocuğu oluşturmak olacaktır elemanın arka planı bulanıklaştırarak (veya arka plan ile sınıf denilen her neyse) ve şöyle Buna stilleri ayarlayın:

HTML:

<div class="parentElement"> 
    <div class="background"></div> 
    <div class="child"></div> 
</div> 

CSS:

.background { filter: blur(15px); } 

Veya JS:

document.getElementsByClassName("background")[0].style.filter = "blur(15px)"; 

"Arka plan" sınıfını bir arka plan gibi hareket ettirmeniz ve bunu yapmak için ana öğenin tam genişliğini oluşturup mutlak olarak ayarlamanız gerekecek.

CSS:

.parentElement { position:relative; } 

.background { position:absolute; top:0; left:0; width:100%; height:100%; filter: blur(15px); }