为什么这么复杂?你的解决方案几乎是正确的，除了它是一种更容易使图案透明和背景色纯色的方法。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);

当你无法控制图像颜色配置文件时，我使用这种方法来为图像应用颜色色调和渐变，使动态叠加文本更容易形成风格，以提高可读性。不用担心z指数。

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

希望能有所帮助

实际上，我使用:之前以不同的方式，我只使用一个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>

然后你需要一个bg图像的包装元素和bg颜色的内容元素:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

还有css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

这里有一个更简单的技巧，只有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>