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;

}

Bootstrap 4-图像作为覆盖和遮罩

1 个答案: