从我的回答如何添加一个颜色叠加到背景图像?标记为该问题的副本，其中没有伪元素，也不需要额外的元素。

这个复制，就在这里，几年后，仍然缺少背景-混合模式属性，现在广泛实现(它位于多个背景和嵌入阴影示例的下面)。

所以这是我的答案，答案给了你3个简单的方法，没有额外的标记或伪:

一开始，我当时看到了两个简单的选项(2016年，这两个选项也在答案中，所以没有什么新东西可以补充的，…如果你已经阅读了关于bg和box-shadow的其他答案，请注意第三个答案):

多重背景与半透明的单一渐变图像从一个旧的代码库，我的例子很少。 巨大的嵌入阴影，它的作用和渐变叠加差不多

这里给出的例子:

梯度选择:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients CSS gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors. You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function). You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions. Gradients can be used anywhere you would use an <image>, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.

html { 最小高度:100%; 背景:线性梯度(0deg, rgba(255, 0, 150, 0.3)， rgba(255, 0, 150, 0.3))， url(https://picsum.photos/id/100/2500/1656); background-size:封面; ｝

阴影选项:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow box-shadow CSS属性在元素的框架周围添加阴影效果。您可以设置多个效果，以逗号分隔。盒子阴影由相对于元素的X和Y偏移量、模糊和扩展半径以及颜色来描述。

插图 如果没有指定(默认)，则假定阴影是投影阴影(就好像盒子被提升到内容之上一样)。inset关键字的出现将阴影更改为框架内的阴影(就像内容在框内被压抑一样)。嵌入阴影是在边框内绘制的(甚至是透明的)，在背景之上，但在内容之下。

html { 最小高度:100%; 背景:url (https://picsum.photos/id/100/2500/1656); background-size:封面; 盒影:插入000 2000px rgba(255, 0, 150, 0.3); ｝

我的一个老代码库，很少有例子

现在，这里省略了第三个选项:

背景混合模式:

background-blend-mode CSS属性设置了一个元素的背景图像如何相互混合以及如何与元素的背景颜色混合。

html { 最小高度:100%; 背景:url(https://picsum.photos/id/100/2500/1656) rgba(255, 0, 150, 0.3); background-size:封面; background-blend-mode:繁殖; ｝

There is of course and also other valuable ways to do this, depending on your project, CSS libraries used and the few option left over from what you already have. There is almost never a single way/method , but different ways .What matters is to find the option that suits your needs the best and efficiently, the method that you understand/master , the browser specifity, option left over from what already being used if you feel confident with or already have a javascript or a server side function that already can/do that job, use it if its already there. a wheel is a wheel.

我只是在目标背景div上使用background-image css属性。 注意background-image只接受渐变颜色函数。 所以我使用线性渐变添加相同的叠加颜色两次(使用最后的rgba值来控制颜色不透明度)。

此外，还找到了以下两个有用的资源:

在背景图像上添加文本(或任何其他内容的div):英雄图像 只模糊背景图像，不模糊上面的div:模糊背景图像

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

使用前伪类和使用不透明度

.left-side {
  position: relative;
  background-color: #5200ff; /*bg color*/
}

.left-side::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(./images/img.jpeg);  /*bg image*/
  background-size: cover;
  background-position: 100%;
  opacity: 0.22;  /*use opacity to show bg color */
}

实际上，我使用:之前以不同的方式，我只使用一个HTML元素<div>，只使用一个CSS类名和使用伪元素技巧:

.background { /* ↓↓↓ the decorative CSS */ font-family: tahoma; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-radius: 8px; overflow: hidden; /* ↓↓↓ the main CSS */ position: relative; background: url('https://picsum.photos/id/355/600/400') no-repeat center / cover; z-index: 1; } .background:before { /* ↓↓↓ the main CSS */ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.5); z-index: -1; } .text { /* ↓↓↓ the decorative CSS */ font-size: 20px; color: #072252; } <div class="background"> <span class="text">Some child</span> <span class="text"></span> </div>

background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);

下面就是:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="background">
    <div class="layer">
    </div>
</div>

当然，如果.background类中没有其他元素，则需要为它定义宽度和高度