如何使用 CSS 使背景变暗？

Question

我有一个带有文本的元素。每当我降低不透明度时，我就会降低整个身体的不透明度。有什么办法可以让 background-image 更暗，而不是其他所有东西？

 background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

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

Answer 1

只需将此代码添加到您的图像 css

  body{
 background:
        /* top, transparent black, faked with gradient */
        linear-gradient(
          rgba(0, 0, 0, 0.7),
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }

参考： linear-gradient() - CSS | MDN

更新：并非所有浏览器都支持 RGBa，所以你应该有一个“后备颜色”。这种颜色很可能是纯色（完全不透明），例如： background:rgb(96, 96, 96) 。有关 RGBa 浏览器支持，请参阅此 博客。

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

Answer 2

将 background-blend-mode 设置为 darken 将是达到目的的最直接和最短的方法，但是您必须设置 background-color 混合模式 - 首先

如果您稍后需要在 javascript 中操作值，这也是最好的方法。

 background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;

我可以用于背景混合吗

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