改变背景图像的亮度？

Question

我想知道是否可以更改以下亮度：

  body{
 background-image:url();
 }

使用 HTML/CSS。之所以要改，是因为我刚刚花了很长时间制作图像，但是当我把它放在网站上时，它突然变亮了两倍。我比较了原始文件和输入网站的文件，它们都是非常不同的蓝色。

这有什么原因吗，有什么办法可以改变亮度吗？

谢谢。

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

Answer 1

这将是一个选项，但它不是很实用并且在旧浏览器中不起作用：

 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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以像这样在“背景”中有更多层：

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

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

必须使用 线性梯度 函数，否则不起作用。

---

或者你可以使用：

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

这对于代码的可维护性更好。

原文由 Martin Zvarík 发布，翻译遵循 CC BY-SA 4.0 许可协议