Question

我想改变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,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，似乎很少亮。

Answer 2

选项1：尝试单独制作白色背景图像，并在悬停效果上替换其图像。

选项2：背景图片的内容尝试使用“绝对”位置进行设置。

用CSS改变JUST背景的亮度

2 个答案: