我想改变DIV背景的亮度,而不影响div中的其他内容.
当我在div上应用悬停亮度过滤器时,其中的其他元素也会受到影响.我不想要的.
我的另一个解决方案就是用照片编辑的替换div的背景.但是要求存储量增加一倍,我不喜欢.
有没有办法改变背景图像的亮度？
<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,.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');
}
上面是我用两次尝试创造所需效果的小提琴的链接.但两者都有使用它的缺点.
提前致谢！
解决方法
谢谢你的帮助.但是当我发布这个之后,我发现了一个想法.
我使用css将整个div内容更改为亮度1.3,而不是将文本的亮度更改为0.8以使其均匀.
像这样：
<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,.5);
border-radius:8px;
}
#text {
color:white;
font-weight:bold;
position:relative;
top:9px;
left:9px;
font-size:16px;
}
我只是不知道正确的数字0.7似乎不如正常的0.8明亮.
