Bootstrap 4 背景图添加透明度0.5半透明黑色遮罩层实现咨询

实现方案 #

这里提供2种无需修改现有HTML结构的实现方式，都可以达到背景图上叠加0.5透明度黑色遮罩的效果：

方案1：CSS背景多层叠加（最简便） #

直接修改.page-header的CSS样式，利用CSS支持多层背景的特性，将半透明黑色渐变放在背景图层上方：

<style>
.page-header {
    /* 半透明黑色遮罩在前，原背景图在后，顺序不能反 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(./gelecek/img/header_img.png);
    /* 补充背景基础属性避免显示异常 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
/* 保证内部文字显示在遮罩层上方 */
.page-header .container {
    position: relative;
    z-index: 1;
    /* 如果标题文字颜色太暗可以手动设置为白色，不需要直接删除下行即可 */
    color: #fff;
}
</style>

方案2：伪元素实现遮罩（灵活性更高） #

如果后续需要调整遮罩的动画、混合模式等效果，用伪元素方案拓展性更强：

<style>
.page-header {
    background-image: url(./gelecek/img/header_img.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
/* 生成独立遮罩层 */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}
/* 保证内部文字在遮罩上层正常显示 */
.page-header .container {
    position: relative;
    z-index: 1;
    /* 同方案1，需要白色文字就保留下行 */
    color: #fff;
}
</style>

两种方案都完全兼容Bootstrap 4的现有结构，不需要修改你原有的HTML代码，直接替换原来的.page-header相关CSS即可生效。

内容的提问来源于stack exchange，提问作者ALAA ELDIN