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?

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');
}

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
InformationsquelleAutor user2953063 | 2013-11-04