Bootstrap 4 - изображение как оверлей и маска

Question

Использование Bootstrap 4 Я пытаюсь добиться эффекта наложения с изображением .png, которое также маскирует часть нижней области первого раздела.

Высота изображения .png составляет 130 пикселей, и оно также должноостаются неизменными на мобильных устройствах.

Я пытался использовать ::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;

}