你也可以添加不透明度叠加颜色。

而不是做

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的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该会起作用。

你也可以使用线性渐变和图像: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

这是因为线性梯度函数创建的图像被添加到背景堆栈中。https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

我只是在目标背景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%);
}

然后你需要一个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%;
}

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

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

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

# img-div { 身高:100 vh; 背景图片:url (https://images.pexels.com/photos/46160/field -云的天空-地球- 46160. - jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260”); 背景位置:中心; background-size:封面; 平铺方式:不再重演; 位置:相对; ｝ # overlay-div { Background-color: rgba(0,0,0,0.5); 身高:100 vh; 位置:相对; ｝ < div id = " img-div " > < div id = " overlay-div " > < / div > < / div >