使用 CSS 改变背景的亮度

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

上面是我两次尝试创建所需效果的小提琴链接。但是两者在使用上都有一个缺点。

提前致谢！

原文由 user2953063 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要仅将亮度应用于背景图像，您可以将图像放置在绝对定位的 div 中，以便亮度仅影响此元素。

在新的 #image div 上将高度和宽度设置为 100% 将允许它填充 #brightnessfilter div，以保留初始示例中的布局。

 #brightnessfilter {
  width: 700px;
  height: 465px;
  position: relative;
}

#image {
  background-image: url('http://i42.tinypic.com/351dff5.jpg');
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

#brightnessfilter:hover #image {
  -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: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.01) 100%), url('http://i40.tinypic.com/2cft7dl.jpg');
}

 <div id="brightnessfilter">
  <div id="image"></div>
  <div id="transparent">
    <span id="text">Random AFFECTED text (it glows)</span>
  </div>
</div>

原文由 Byron 发布，翻译遵循 CC BY-SA 4.0 许可协议