Css 使背景中的图像变暗

有没有办法使

.png

图像变暗？我有一个作为背景图像，但如果我设置overlay使其变暗，它不会覆盖整个容器

.overlay {
    background-color: #322D36 ;
     bottom: 0;
     left: 0;
     opacity: 0.5;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 1;
}

它在图像空间之外也是可见的。有没有办法只让图像变暗

您可以像这样使用（不受超级支持的）

筛选器

属性

filter: brightness(0.4);

可能需要一些前缀，如

-webkit-

这是一个例子

因评论而编辑：

将容器设置为图像的宽度和高度，然后使用before伪类添加图像

.container {
  position: relative;
  width: ###;
  height: ###;
}

.container:before {
  content: '';
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  position: absolute;
  z-index: 1;
  background-image: some-url;
  -webkit-filter: brightness(0.4);
}

.content {
  position: relative;
  z-index: 10;
}

---

将所有文本放在

.content

分区中。

您可以在背景中使用

线性渐变

background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7) ), url("https://lh4.googleusercontent.com/-kDFp715GK_iC4AwrDWQpCR0HfxDMp0WYZATcnlXDhXgf-05OTv3Z9E-P1bL2imdAFAtWg=w1876-h815");


在这里，您可以看到只有背景是黑色的，其余元素是正常的。
您可以在
背景图像
属性之后使用背景色，并使用
背景混合模式属性覆盖
背景图像
。这是一个例子

如果容器中也有一个tex怎么办？它也会使文本变暗并破坏其颜色。但在你的情况下，里面的内容将永远是黑暗的。看，它更新了我的答案。是的，但正如我所说的，我只需要图像是黑色的。此演示显示容器中未被图像覆盖的剩余空间也将变暗。@Josh不，不是。图像没有覆盖的地方是空白。@Josh哦，等等，你换了img了吗？还有，看第二个例子。不，我没有改变img。如果你注意到图片的底部是三角形的，这使得容器的空间没有遮盖。使用此选项可以将颜色从白色（defualt）更改为线性渐变。@Josh很抱歉，我没有看到三角形。我不太明白的一件事是，为什么在第一个例子中，空白区域会受到线性梯度的影响，而在第二个例子中，它不会受到影响。