迹忆客 专注技术分享

在本文中，我们将介绍几种在 CSS 中使背景图像变暗的方法。

在 CSS 中使用线性渐变使背景图像变暗

我们可以使用 CSS Linear Gradient 在 CSS 中使背景图像变暗。linear-gradient() 函数创建具有线性渐变的背景。线性渐变是至少两种不同颜色之间的平滑过渡。该函数采用无数的颜色参数。我们可以将梯度的方向设置为第一个参数。方向的选项是 to right、to left、to bottom right、90deg 等。我们可以将线性渐变应用于背景图像并设置较暗的颜色和不透明度以使背景图像变暗。我们可以使用 linear-gradient() 函数中的 rgba() 函数来设置颜色。在这里，我们只会使背景图像变暗，而不会使其他元素变暗。

例如，在 CSS 中选择容器并使用 background 速记属性来设置线性渐变和背景图像。编写 linear-gradient() 函数并将两个色标设为 rgba(0, 0, 0, 0.7)。接下来，使用 url() 函数设置你选择的背景图像。使用各种背景属性将图像正确放置在背景中。将 background-position 设置为 center，将 background-repeat 设置为 no-repeat，将 background-size 设置为 cover。将高度设置为 100%。确保选择 body 和 html 标签并将高度设置为 100%，边距设置为 0。

在下面的示例中，我们使用 rgba(0, 0, 0, 0.7) 作为两个色标。函数 rgba(0, 0, 0) 等于黑色。第四个值是不透明度的值。接近 1 的值使其更暗，反之亦然。我们可以根据需要调整不透明度值，使背景图像变暗。这样，我们就可以在 CSS 中使用线性渐变来使背景图像变暗。

示例代码：

<div id="background"></div>

body, html {
    height: 100%;
    margin: 0;
}

#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

在 CSS 中使用 background-blend-mode 属性使背景图像变暗

我们可以使用 background-blend-mode 属性来使 CSS 中的背景图像变暗。该属性设置背景的混合模式。此属性有多种选择。一些选项是 normal、multiply、darken、lighten, saturation 等。我们可以使用变暗选项使背景图像更暗。我们可以使用 rgba() 函数设置背景图像的颜色。

例如，在 CSS 中选择 background id 并使用 background 属性设置颜色和背景图像。将颜色设置为 rgba(0, 0, 0, 0.7) 并在 url() 函数中使用占位符图像。使用与第一种方法不同的背景属性来正确设置图像。接下来，使用 background-blend-mode 属性并将其设置为 darken。

通过这种方式，我们可以使用 background-blend-mode 属性使背景图像变暗。

示例代码：

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background"></div>