css - 带有叠加 CSS 的背景图像

Question

我如何像这个示例图片那样在 CSS 中设计带有叠加层的背景图片。

这里是代码。我想将 tour 类添加到背景图像和叠加效果中。

<div class="tour">
    <div class="container">
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
    </div>
</div>

Answer 1

你可以使用这个代码

HTML

<div id="wrapper">
    <img src="image-file" alt="">
    <div class="overlay"></div>
</div>

CSS

#wrapper {
    position: relative;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
}