html - 如何使用 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>