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

.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 */
}

下面就是:

.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类中没有其他元素，则需要为它定义宽度和高度

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

.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 */
}

您可以使用半透明像素，例如，您可以在base64中生成它 下面是一个白人占50%的例子:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

没有上传 无需额外的HTML 我想加载应该比盒影或线性渐变更快

另一个带有SVG的内联覆盖图像(注意:如果你在SVG代码中使用#，你必须urlencode !):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

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

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

所以这是我的答案，答案给了你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.