这里有一个更简单的技巧，只有css。

<div class="background"> </div> <style> .background { position:relative; height:50px; background-color: rgba(248, 247, 216, 0.7); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); } .background:after { content:" "; background-color:inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

下面就是:

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

从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);
}

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

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

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

为什么这么复杂?你的解决方案几乎是正确的，除了它是一种更容易使图案透明和背景色纯色的方法。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: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

你可以:

background: url('../img/bg/diagonalnoise.png');

然后为不透明度颜色创建一个新样式:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

将不透明度更改为低于1的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该会起作用。