更改背景图片的亮度？

Question

我想知道是否有可能调节以下物品的亮度：

 body{
 background-image:url();
 }

使用 HTML/CSS。我希望更改它的原因是我花了相当长的时间制作图片，但当我将其放在网站上时，它突然变得明亮了约两倍。我已经比较了原始文件和输入到网站的文件，它们都是非常不同的蓝色。

这是为什么，有没有办法可以改变亮度？

谢谢。

- user3227878

---

不行，你不能。保存图像时无法调整亮度。 - Gert B.

https://hsivonen.fi/png-gamma/ - Quentin

我认为你没有完整地阅读Gert B的内容，我已经按照需要保存了图像的亮度，并且原始文件也是完美的，但是一旦我将其放在网站上，它就会突然变得两倍亮度，或者说蓝色的阴影变得两倍亮度。 - user3227878

Answer 1

您可以像这样在“背景”中添加更多层：

.someObj{
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url(myBgImage.png);
}

这将在原始图像上添加50%的白色，使其更亮。

必须使用linear-gradient函数，否则它不起作用。

---

或者使用：

.someObj:after{ content:''; background:rgba(255,255,255,.5); ... }

这样做有利于代码的可维护性。

- Martin Zvarík

---

这是一个不错的解决方案，适用于具有视差滚动容器的情况，其中包括：background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png); - Manuel

Answer 2

这可能是一种选择，但并不是非常实用，并且在旧版本浏览器中无法工作：

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

或者为了更好的颜色控制，尝试使用hsla()颜色：

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

实际上，最好在图片编辑器中进行调整，直到您获得所需的浏览器结果。

- ralph.m

---

很多时候事先编辑图像并不是一个选项，这就是为什么滤镜存在的原因。例如，如果您想要将背景图像变暗，然后在悬停时去除变暗效果...您该如何使用两个具有所需暗度的图像在CSS中实现此操作？要查看此效果的示例，请将光标悬停在BBC网站上的图像上，这是我目前正在克隆的网站。 https://www.bbc.com/ - James Hubert

Answer 3

在所有浏览器中实现这个功能是不可能的，但如果您愿意，可以在webkit浏览器（Chrome，Safari，Opera）中使用filter样式来实现：

img.lessBright {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

这导致在Webkit浏览器中亮度降低到80％。如果您想这样做，我建议保存另一个版本的图像。

- Joeytje50

---

这样会使整个元素变暗，包括文本和边框...... 最好使用opacity（）或其他方法。 - Martin Zvarík

不透明度并不一定会变亮，它只是让背景透过来。要想让不透明度产生类似的效果，您必须强制父元素具有白色背景。将 background:white 应用于图像是行不通的，因为背景也会设置相同值的不透明度。 - Joeytje50

Answer 4

1. 为相同尺寸的背景图片创建一个子级div。
2. 使用RGBA设置子级div的背景颜色，其中包括alpha通道（透明度）。
3. 根据需要设置透明度值在0和1之间。1=不透明, 0=透明, 0.5=半透明

HTML:

<div id="primary_feature">
    <div class="feature"></div>
</div>

CSS：

#primary_feature{
  background-image: url("../assets/images/misc/laptop.png");
}
.feature{
  background:rgba(0,0,0,0.6);
}

- Sam_

Answer 5

答案的更新。

你还可以使用背景过滤器来获得更好的效果。它可以使用任何过滤器，在这种情况下，是亮度过滤器。

这意味着你的背景不会被覆盖上颜色而变得模糊，相反它将直接影响背景，使其看起来更加清晰自然，并保留所有细节。

缺点是，除非打开实验性设置，否则它目前不支持Firefox。但这应该很快就会改变，截至撰写本文时，Firefox只占市场的6.5%。

然而，在Chrome浏览器中完全支持。

body {
content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: brightness(120%);
    pointer-events: none;
}

- Electron

---

似乎工作得很好，但它破坏了页面上所有固定元素。 - morja

Answer 6

我在图像上放置了一块黑色画布并改变了亮度：

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0,0,c.width,c.height); //as image size
ctx.fillStyle = "#000000" + brightness;
ctx.fill();

- DaveR

Answer 7

我遇到了同样的问题，但是它与 Gif 有关。

我的解决方法：

我在 PowerPoint 中制作了一个非常小的黑色正方形图像，并将其透明度设置为 50%，并保存为名为“dimmerswitch.png”的文件。

然后我首先在代码中引用了那个文件：

body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}

- Floppsy

Answer 8

如果没有其他方法，你可以使用 Photoshop 来降低亮度。

- Taran Deep Singh

---

所以，如果你的回答被理解为：“只需使用Photoshop编辑图像。不要再去寻找CSS规则了”... ?! 好吧... 这也可以是一个答案。 - Louys Patrice Bessette