如何使用 CSS 使图像变暗？

Question

我有一张横跨整个屏幕的图像：

<div>
  <img className="background-image" src={url} /> 

  <h1>{name}</h1>
  ... 

</div>


 .background-image {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
 }

现在，我想让整个图像变暗。我怎样才能做到这一点？我尝试在图像旁边添加一个具有黑色背景和全宽和全高的 div，但这会弄乱一切。我想做的就是使图像变暗，以便可以轻松阅读页面上的文本。

Answer 1

该filter物业会这样做，但并未得到广泛支持。我会使用一个伪元素，绝对定位在带有背景的图像上rgba()，或者将纯色背景与opacity.

div {
  position: relative;
  display: inline-block;
}
div:before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: black;
}
img {
  vertical-align: top;
  opacity: .5;
  position: relative;
}

<div><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></div>