我怎样才能让你在中心和背景图像上像这样？css引导

Question

​

​

我的代码

​

<div style="background-image: url('{{ asset('img/background-line.svg') }}')">
    <div class="row my-10 justify-content-center">
        <div class="col-auto">
            <div class="card border-0 rounded-0 rounded-top">
                <div class="card-body py-5">
                    <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold p-0">
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted"><i class="fa fa-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Layanan Investasi</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Sektor Aneka ET</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

​

我怎样才能让你在中心和背景图像上像这样？css引导，所以Bradcome是固定的中心

Answer 1

使用class="card-body mt-5 p-0"而不是class="card-body py-5"

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div style="background-image: url('https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg')">
    <div class="row justify-content-center">
        <div class="col-auto">
            <div class="card border-0 rounded-0 bg-transparent">
                <div class="card-body mt-5 p-0">
                    <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold py-3 px-5">
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted"><i class="fa fa-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Layanan Investasi</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Sektor Aneka ET</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

​

Answer 2

试试下面的代码。您将需要通过css手动删除底部边框半径。

​

.breadcrumb {
  border-bottom-left-radius: 0!important;
  border-bottom-right-radius: 0!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div style="background-image: url('https://picsum.photos/1000')">
    <div class="row justify-content-center">
        <div class="col-auto">
            <div class="card border-0 rounded-0 bg-transparent">
                <div class="card-body mt-5 p-0">
                    <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold py-3 px-5">
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted"><i class="fa fa-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Layanan Investasi</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#" class="text-muted">Sektor Aneka ET</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

​