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>

Answer 2

如果您不关心IE使用filter: brightness()，请参阅can i use filters

＆＃13;

body {
  margin: 0
}

div {
  position: relative
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  filter: brightness(.7)
}

＆＃13;

<div>
  <img class="background-image" src="http://lorempixel.com/400/200/sports" />
</div>

＆＃13;

否则，对于跨浏览器，您可以将伪元素::after与背景rgba

一起使用

＆＃13;

body {
  margin: 0
}

div {
  position: relative;
}

div::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .7);
  content: "";
}

img {
  width: 100%
}

＆＃13;

<div>
  <img class="background-image" src="http://lorempixel.com/400/1000/sports" />
</div>

＆＃13;

编辑 - OP的评论

问题是我希望我的图像跨越整个屏幕。这种方法使图像跨越div的宽度和高度

因此，请使用背景图像而不是图像。

＆＃13;

body {
  position: relative;
  background: url(http://lorempixel.com/400/200/sports) no-repeat 0 0 / cover;
  margin: 0;
  height:100vh
}

body::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .7);
  content: "";
}

＆＃13;

Answer 3

创造一个过分的

像那样

 .overly{
   position: absolute;
   top: 0;
   left: 0; 
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5); 
}

并将其放在你的div旁边与你的图像或只是给你的容器这个类如果要进行图层定位，您可以使用z-index

Answer 4

Yu也可以在图像上使用线性渐变。您可以在线使用发电机作为后援

div{
    background-image: url(https://homepages.cae.wisc.edu/~ece533/images/fruits.png);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3000000,endColorstr=#B3000000);
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),
    url(https://homepages.cae.wisc.edu/~ece533/images/fruits.png);
    background-size: cover;
    background-position: 50% 50%;
    height: 200px;
    width: 30%;
    }
    div+div{
background-image: url(https://homepages.cae.wisc.edu/~ece533/images/fruits.png);
    }

Darkened
<div></div>
Original
<div></div>

如何使用CSS使图像变暗？

4 个答案: