为什么这么复杂?你的解决方案几乎是正确的，除了它是一种更容易使图案透明和背景色纯色的方法。PNG可以包含透明文件。因此，使用photoshop将图层设置为70%，使图案透明，并保存图像。那么你只需要一个选择器。跨浏览器工作。

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

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

这是最基本的。下面是一个使用示例，其中我从background切换到background-image，但两个属性都是相同的。

body { margin: 0; } div { height: 110px !important; padding: 1em; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-weight: 600; color: white; text-shadow: 0 0 2px #333; } .background { background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */ } .col-one { background-color: rgb(255, 255, 0); } .col-two { background-color: rgb(0, 255, 255); } .col-three { background-color: rgb(0, 255, 0); } <div class="background col-one"> 1. Background </div> <div class="background col-two"> 2. Background </div> <div class="background col-three"> 3. Background </div>

请等一下!加载外部模式需要一些时间。

这个网站似乎很慢…

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

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

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

为什么这么复杂?你的解决方案几乎是正确的，除了它是一种更容易使图案透明和背景色纯色的方法。PNG可以包含透明文件。因此，使用photoshop将图层设置为70%，使图案透明，并保存图像。那么你只需要一个选择器。跨浏览器工作。

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

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

这是最基本的。下面是一个使用示例，其中我从background切换到background-image，但两个属性都是相同的。

body { margin: 0; } div { height: 110px !important; padding: 1em; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-weight: 600; color: white; text-shadow: 0 0 2px #333; } .background { background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */ } .col-one { background-color: rgb(255, 255, 0); } .col-two { background-color: rgb(0, 255, 255); } .col-three { background-color: rgb(0, 255, 0); } <div class="background col-one"> 1. Background </div> <div class="background col-two"> 2. Background </div> <div class="background col-three"> 3. Background </div>

请等一下!加载外部模式需要一些时间。

这个网站似乎很慢…

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

从css技巧…有一个一步的方法来做到这一点，没有z索引和添加伪元素-需要线性梯度，我认为这意味着你需要CSS3支持

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

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

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