我有一张横跨整个屏幕的图片:
<div>
<img className="background-image" src={url} />
<h1>{name}</h1>
...
</div>
.background-image {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
现在,我想使整个图像变暗。我怎样才能做到这一点?我尝试在具有黑色背景和完整宽度和高度的图像旁边添加一个 div,但这弄乱了一切。我所做的只是使图像变暗,以便可以轻松阅读页面上的文本。
最佳答案
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>
关于html - 如何使用 CSS 使图像变暗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43669504/