14

我想改变一个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');
}

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

提前致谢！

4

6 回答 6

0

感谢所有的帮助。但是，在我发布此消息后，我突然想到了一个主意。

我使用 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 似乎不太亮。

于 2013-11-04T17:46:38.130 回答
0

可以通过使用伪元素来实现。您必须将背景分配给伪元素并以此填充整个元素。

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

#brightnessfilter:before{
    display:block;
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter:hover:before {
     -webkit-filter: brightness(1.3);
    -moz-filter: brightness(1.3);
    -o-filter:  brightness(1.3);
    -ms-filter:  brightness(1.3);
}
于 2021-12-08T01:21:20.917 回答
0

要将亮度仅应用于背景图像，您可以将图像放置在绝对定位的 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>

于 2022-01-01T16:57:05.667 回答
0

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

选项 2：背景图像的内容尝试使用 position: absolute 进行设置。

于 2019-12-30T14:01:27.633 回答
0

下面是我如何做我的背景给它一个漂亮的橙色发光，也许你可以做一些类似的事情来给你的图像一些亮度？

body {
  background: linear-gradient(
      90deg,
      rgba(255, 140, 0, 0.459) 4%,
      rgba(196, 209, 8, 0.616) 53%,
      rgba(255, 132, 0, 0.692) 100%
    ),
    url(img/sunset1.jpg);
  background-size: cover;
  overflow-y: hidden;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}
于 2021-12-01T11:11:12.067 回答
0

我为自己使用了这个技巧

.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative;
}
<div class="demo-wrap">
  <img
    class="demo-bg"
    src="https://assets.digitalocean.com/labs/images/community_bg.png"
    alt=""
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity

于 2022-02-08T06:46:27.037 回答