迹忆客 专注技术分享

本文将介绍几种在 CSS 中用颜色叠加图像的方法。

在 CSS 中使用 rgba() 函数用颜色覆盖背景图像

我们可以使用 rgba() 函数在图像上创建颜色叠加。我们可以将该函数用作 background 属性的值。

rgba() 函数的语法如下所示。

rgba(red, green, blue, opacity);

此处，红色、绿色和蓝色设置为介于 0-255 和不透明度介于 0-1 之间的值。如果 opacity 的值设置为 0，则它是完全透明的，如果 opacity 的值设置为 1，它将是完全不透明的。

我们可以简单地通过在图像上方添加颜色来降低其不透明度来创建叠加层。

例如，创建一个 div 标签并给它一个 id main。然后，在标题中创建一个 div 并给它一个类 overlay。

接下来，创建一个段落 p 并写一些文字。在 CSS 中，将背景图像设置为 main id，使得 background: url("") no-repeat fixed。

background-repeat 属性是 no-repeat，background-position 属性是 fixed。接下来，给 div 赋予 100% 的高度，以根据内容调整其高度。

将溢出属性设置为 hidden 以隐藏从容器溢出的内容。此外，将颜色设置为白色以使文本更明显。

最后，将 position 属性设置为 absolute。

接下来，我们必须通过设置 overplay div 的样式来创建叠加层。给它一个背景颜色和不透明度，这样 background: rgba(50, 70, 80, 0.7);。

将 height 属性设置为 100% 以匹配其父元素的高度。如上所述将 div 的 overflow 属性设置为 hidden。

下面的示例显示类名称为 overlay 的 div 出现在 main div 上。由于 div 具有透明的背景颜色，因此背景图像是可见的。

示例代码：

<div id="main">
 <div class="overlay">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </p>
 </div>
</div>

#main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100%;
 overflow: hidden;
 color: #FFFFFF;
 position: absolute;
}

.overlay {
 background: rgba(50, 70, 80, 0.7);
 overflow: hidden;
 height: 100%;
}

在 CSS 中使用 linear-gradient 函数使用渐变叠加背景图像

线性渐变是一种 CSS 函数，它可以创建沿直线在两种或多种颜色之间渐进过渡的彩色图像。不同的颜色和不同的方向混合在一起，创造出五颜六色的图案。

我们可以使用 linear-gradient 作为背景颜色，也可以将其用作图像叠加层。但是，要将其用作图像叠加层，我们必须将其与背景图像一起使用。

不透明度较低的颜色应该是 linear-gradient 以使背景图像可见。

linear-gradient 函数的第一个参数是渐变的方向。之后，我们可以根据需要指定色标。

例如，创建一个 ID 为 main 的 div。在 CS 中选择 id 并将容器的高度和宽度设置为 100vh 和 100%。

然后使用 background 速记属性设置线性渐变和背景图像。编写 linear-gradient 属性并使用 to right 方向作为第一个参数。

接下来，使用 rgba() 函数来指定渐变。将 rgba(50, 70, 80, 0.7) 作为第一个色标添加 rgba(30, 20, 150, 0.7) 作为第二个色标。

在 linear-gradient 函数之后，使用 url() 插入图像，并使用 no-repeat 和 fixed 选项插入背景图像。

在这里，我们在 linear-gradient 中使用了两种颜色，每种颜色的 opacity 为 0.7。linear-gradient 中的 to right 值表示颜色的图案或方向。

这意味着容器的左侧包含颜色 rgba(50, 70, 80, 0.7)，然后在向右移动时颜色逐渐变为 rgba(30, 20, 150, 0.7)。

下面的例子显示了 linear-gradient 提供了图像叠加，由于 linear-gradient 中使用的颜色的透明度，它包括从左到右移动的两种不同颜色。

示例代码：

<div id="main">
</div>

#main {
 height: 100vh;
 width: 100%;
 background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("/img/DelftStack/logo.png") no-repeat fixed;
}

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

background-blend-mode 属性设置元素的背景图像应如何与元素的背景颜色混合。该属性采用诸如 lighten、darken、multiply、saturation、overlay、soft-light、color-dodge、hard-light 等值。

background-blend-mode 属性将 background-color 与 background-image 混合。background-blend-mode 属性的默认值为 normal。

我们可以使用该属性为背景图像提供覆盖。我们可以在设置背景图像后使用 background-blend-mode 属性。

例如，在 HTML 中创建一个 div。在 CSS 中，使用 url() 函数设置背景图像，并在 background 属性中设置 no-repeat 和 fixed 值。

接下来，将 div 的高度设置为 100vh。为 overflow 属性应用 hidden 值。

同样，将 background-color 属性设置为值 rgba(50, 70, 80, 0.7)。最后，使用 background-blend-mode 并将其值设置为 soft-light 以向背景图像添加叠加效果。

示例代码：

<div id="main">
</div>

 #main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100vh;
 overflow: hidden;
 background-color: rgba(50, 70, 80, 0.7);
 background-blend-mode: soft-light;
}