Voglio cambiare la luminosità dello sfondo di un DIV, senza influenzare gli altri contenuti in un div.Cambia la luminosità di SOLO lo sfondo con i CSS
Quando si applica un filtro di luminosità al passaggio del mouse sul div, anche gli altri elementi in esso sono interessati. Che non voglio
L'altra soluzione che ho è semplicemente la sostituzione dello sfondo del div con una foto modificata. Ma questo richiede il doppio della memoria, che non mi piace.
C'è un modo per modificare solo la luminosità dell'immagine di sfondo?
<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');
}
Sopra: ecco un link per un violino con i miei due tentativi di creare l'effetto desiderato. Ma entrambi hanno uno svantaggio nell'usarlo.
Grazie in anticipo!
non senza un codice HTML non semantico – PlantTheIdea