Modifier la luminosité de JUSTE le fond avec les CSS
Je veux changer la luminosité d'une DIV à l'arrière-plan, sans touchés que le reste du contenu dans un div.
Lorsque j'applique un hover filtre luminosité sur la div, d'autres éléments sont également touchés. Que je ne veux pas.
L'autre solution que j'ai est de simplement remplacer le fond de la div avec une photo modifiée. Mais que demande le double de l'espace de stockage, je n'aime pas.
Est-il un moyen de changer la luminosité de l'image de fond d'écran?
<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');
}
Ci-dessus voici un lien vers un violon avec mes deux tentatives à créer l'effet désiré. Mais tous les deux ont un inconvénient à l'utiliser.
Merci d'avance!
- non sans une certaine non-sémantique HTML
Vous devez vous connecter pour publier un commentaire.
Merci pour toute l'aide. Mais juste après que j'ai posté ce je suis tombé sur une idée.
Je utiliser css pour modifier l'ensemble de divs contenu de la luminosité 1.3 et que je change le texte de la luminosité de 0,8 à cela.
Comme ceci:
JSFIDDLE
Je juste ne sais pas le nombre exact de 0,7 semble de moins en moins lumineux que la normale 0.8 semble peu lumineux.