用CSS改变背景的亮度

Question

我想改变DIV背景的亮度，而不影响div中的其他内容。

当我在div上应用悬停亮度过滤器时，其中的其他元素也受到影响。我不想要的。

我的另一个解决方案是用编辑过的照片替换div的背景。但是，这需要双倍的存储空间，我不喜欢。

有没有办法改变背景图像的亮度？

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

上面这里是创造预期的效果链接到一个拨弄我的两个尝试。但两者在使用时都有缺点。

在此先感谢！

Answer 1

感谢您的帮助。但是，当我发布这个消息之后，我发现了一个想法。

我使用CSS来将整个div内容更改为亮度1.3，并且将文本的亮度更改为0.8即使是亮度也是如此。

像这样：

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

我只是不知道正确的数字0.7似乎不太光明高于正常0.8似乎没有亮。