CSS ile arka plandaki parlaklığı CSS ile değiştirin

Question

Bir DIV'nin arka planının parlaklığını, bir div içindeki diğer içerikleri etkilemeden değiştirmek istiyorum.

Divanda bir parlaklık filtresi uygularken, içindeki diğer öğeler de etkilenir. Ben istemiyorum.

Sahip olduğum diğer çözüm, div'in arka planını bir fotoğraf düzenlenmiş olanla değiştirmektir. Ama bu, istemediğim iki katı depolamayı ister.

Arka plan görüntüsünün parlaklığını değiştirmenin bir yolu var mı? Burada Üstü

JSFIDDLE

<div id="replace"> 
    <div id="transparent"> 
     <span id="text">Random unaffected text</span> 
    </div> 
</div> 

    <div id="brightnessfilter"> 
    <div id="transparent"> 
     <span id="text">Random AFFECTED text (it glows)</span> 
    </div> 
</div> 

#replace { 
width:700px; 
height:465px; 
background-image:url('http://i42.tinypic.com/351dff5.jpg'); 
} 

#brightnessfilter { 
    width:700px; 
    height:465px; 
    background-image:url('http://i42.tinypic.com/351dff5.jpg'); 
} 

#brightnessfilter:hover { 
    -webkit-filter: brightness(1.3); 
-moz-filter: brightness(1.3); 
-o-filter: brightness(1.3); 
-ms-filter: brightness(1.3); 
} 

#transparent { 
    position:relative; 
    top:400px; 
    width:700px; 
    height:65px; 
    background-color:rgba(0,0,0,.5); 
    border-radius:8px; 
} 

#text { 
    color:white; 
    font-weight:bold; 
    position:relative; 
    top:9px; 
    left:9px; 
    font-size:16px; 
} 

#replace:hover { 
    background-image:url('http://i40.tinypic.com/2cft7dl.jpg'); 
} 

istenen etkiyi yaratmak benim iki girişimleri ile keman için bir bağlantıdır. Fakat her ikisinin de kullanımında bir dezavantajı var.

Şimdiden teşekkürler! Tüm yardım için

Answer 1

teşekkürler. Ama tabiki bu yazıyı gönderdikten hemen sonra bir fikre kapıldım.

Tüm div içeriğini parlaklık 1.3 olarak değiştirmek için css kullanıyorum ve metnin parlaklığını 0,8 olarak değiştirdiğimden bile. Bunun gibi

:

Sadece bilmiyorum

JSFIDDLE

<div id="brightnessfilter"> 
    <div id="transparent"> 
     <span id="text">Random AFFECTED text (it glows)</span> 
    </div> 
</div> 

#brightnessfilter { 
    width:700px; 
    height:465px; 
    background-image:url('http://i42.tinypic.com/351dff5.jpg'); 

} 

#brightnessfilter:hover { 
    -webkit-filter: brightness(1.3); 
-moz-filter: brightness(1.3); 
-o-filter: brightness(1.3); 
-ms-filter: brightness(1.3); 
} 

#brightnessfilter:hover #text { 
    -webkit-filter: brightness(0.8); 
-moz-filter: brightness(0.8); 
-o-filter: brightness(0.8); 
-ms-filter: brightness(0.8); 
} 

#transparent { 
    position:relative; 
    top:400px; 
    width:700px; 
    height:65px; 
    background-color:rgba(0,0,0,.5); 
    border-radius:8px; 
} 

#text { 
    color:white; 
    font-weight:bold; 
    position:relative; 
    top:9px; 
    left:9px; 
    font-size:16px; 
} 

doğru numarayı 0.7 0.8 biraz parlak görünüyor normalden daha az parlak gözüküyor.