Ändern der Helligkeit von JUST der Hintergrund mit CSS

Question

Ich möchte die Helligkeit eines DIV Hintergrund ändern, ohne die anderen Inhalte in einem div.

Wenn ich einen Hover-Helligkeitsfilter auf das Div anwenden, sind auch andere Elemente betroffen. Was ich nicht will.

Die andere Lösung, die ich habe, ist einfach ersetzt den Hintergrund des Div mit einem Foto bearbeitet. Aber das verlangt nach dem doppelten Speicherplatz, den ich nicht mag.

Gibt es eine Möglichkeit, nur die Helligkeit des Hintergrundbildes zu ändern?

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

Above hier ist ein Link zu einer Geige mit meinen zwei Versuche, um den gewünschten Effekt zu schaffen. Aber beide haben einen Nachteil bei der Verwendung.

Vielen Dank im Voraus!

Answer 1

Danke für die Hilfe. Aber natürlich, nachdem ich das geschrieben hatte, kam ich auf eine Idee.

Ich benutze CSS, um den gesamten divs Inhalt auf Helligkeit 1.3 zu ändern, und dann ändere ich die Helligkeit des Textes auf 0.8, um es auszugleichen.

So:

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

Ich weiß nur nicht die richtige Nummer 0.7 scheint weniger hell als normal 0,8 wenig zu hell scheint.