css - Bootstrap 4 - 图像作为叠加层和蒙版

Question

我正在使用 Bootstrap 4 尝试使用 .png 图像实现叠加效果，这也掩盖了第一部分底部区域的一部分。

.png 图像的高度为 130px，并且在移动设备上也应保持未缩放。

我尝试在第一部分使用 ::after 伪元素作为背景图像，但这给了我一个不需要的底部边距。

在这里查看我的示例:https://codepen.io/michalwyrwa/pen/EGbxXb

有更好的方法吗？

CSS:

body {
    color: #ecf0f1;
}

.welcome .col {
    background-color: #3498db;
    height: 50vh;
}

.welcome::after {
    content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
    display: block;
    margin: 0;
    padding: 0;
}

.features .col {
    background-color: #6ab04c;
    height: 50vh;
}

HTML:

<section class="welcome">
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-12">
                <p class="my-3">Welcome text</p>
            </div>
        </div>
    </div>
</section>

<section class="features">
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-12">
                <p class="my-3">Features</p>
            </div>
        </div>
    </div>
</section>

Answer 1

我没有找到您问题的根本原因，但我有适合您的解决方案。

.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
padding: 0;
margin-bottom: -6px;
}