文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用bootstrap-4覆盖背景底线？

问如何用bootstrap-4覆盖背景底线？
EN

Stack Overflow用户

提问于 2021-02-12 10:08:32

回答 1查看 54关注 0票数 0

我已经制作了标题，当使用svg划分部分时，我在svg下面有一条线，我试图通过在css中使用:：after在白色背景上放置一条空行来覆盖它，并将内容留空，但在此情况下仍会发生相同的情况。here you see a line at the end that corresponds to the background

.header {
    background-image: url(../img/bg-header.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}

#logo-header {
    --tam: 40px;
    width: var(--tam);
}

a{
    color: #fff;
}

.header::after {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #fff;
position: absolute;
left: 0;
bottom: 0;
}

<!DOCTYPE html>
<html lang="es">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="juan diego gutierrez">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <title>Trip trip</title>

    <!-- CSS Bootstrap -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <!-- CDN Font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>

    <!-- CSS Main -->
    <link rel="stylesheet" href="./css/main.css" />

</head>
<body>
    <!-- header -->
    <header class="header">
        <div class="container pt-2">

            <!-- navbar -->
            <nav class="navbar navbar-expand-lg">
                <a class="navbar-brand" href="#"> <img id="logo-header" class="mr-1" src="img/logo-white.svg" alt="logo">WESTON</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">HOME</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">EXPERIENCE</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">FEATURES</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">CONTACT</a>
                        </li>
                    </ul>       
                </div>
            </nav>

            <!-- description -->
            <div class="col-6 mt-5 pt-5">
                <h6 class="text-warning">The Great Outdoor</h6>
                <h1 class="text-white">Adventure</h1>
                <p class="text-white">Lorem ipsum dolor sit, amet, consectetur adipisicing elit. A vitae, impedit, nesciunt velit iusto modi.
                </p>
                <a href="#" class="btn btn-warning text-white mt-2">Buy now</a>
            </div>
        </div>

        <!-- cut-image -->
        <img src="img/cuts/cut-header.svg" alt="division section">
        
    </header>









    <!-- Jquery -->
    <script src="./js/jquery-3.5.0.min.js"></script>
    <!-- Popper -->
    <script src="./js/popper.min.js"></script>
    <!-- JS Bootstrap -->
    <script src="./js/bootstrap.min.js"></script>
</body>
</html>

html

css

bootstrap-4

回答 1

Stack Overflow用户

发布于 2021-08-18 04:10:42

对我来说起作用的是将display:block;添加到SVG样式中，或者在标记中：

<svg style="display:block;" ...>

或者在你的CSS中：

svg { display:block; }

另请参阅Svg line strange effect on bottom-border

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66165518

复制

相似问题

问如何用bootstrap-4覆盖背景底线？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用bootstrap-4覆盖背景底线？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用bootstrap-4覆盖背景底线？
EN