我想改变DIV背景的亮度,而不影响div中的其他内容。用CSS改变背景的亮度
当我在div上应用悬停亮度过滤器时,其中的其他元素也受到影响。我不想要的。
我的另一个解决方案是用编辑过的照片替换div的背景。但是,这需要双倍的存储空间,我不喜欢。
有没有办法改变背景图像的亮度?
Random unaffected text
Random AFFECTED text (it glows)
#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');
}
上面这里是创造预期的效果链接到一个拨弄我的两个尝试。但两者在使用时都有缺点。
在此先感谢!
+0
不是没有一些非语义的HTML –