您可以在“背景”中拥有更多层，如下所示：

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

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

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

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

实际上，最好在图像编辑器中处理图像，直到获得想要的浏览器结果。

没有办法在所有浏览器上都能做到这一点，但如果你愿意，你可以在webkit浏览器（Chrome、Safari、Opera）中使用filter样式：

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

这将导致webkit浏览器的亮度降低到80%。如果你想这样做，我建议你只保存另一个版本的图像。

1.为相同尺寸的背景图像创建一个子div。
1.使用RGBA设置子div的背景颜色，其中包括Alpha通道（不透明度）。
1.将不透明度相应地设置在0和1之间。*1 =不透明，0=透明，0.5 =半透明 *
超文本：

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

另一个答案的更新。

您也可以使用Backdrop Filter来获得更好的效果。它可以使用任何filter，在本例中为brightness filter。
这意味着你的背景不会被顶部的颜色冲淡，而是会直接影响背景，在保留所有细节的同时获得更清晰更自然的外观。
缺点是，目前Firefox不支持这个功能，除非打开实验性设置，但这种情况很快就会改变，在写这篇文章时，Firefox只占市场的6.5%。

但是，Chrome完全支持它

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

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

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();

我也有同样的问题，但那是和一个女孩。
我的解决方案：
我在PowerPoint中制作了一个非常小的黑色方形图像，并将其透明度设置为50%，并将其保存为名为“dimmerswitch.png”的文件
然后我在代码中引用了第一个：

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

如果没有别的办法，你可以用Photoshop来降低亮度。