所以我一直在嘗試將影像添加到 Bootstrap 4 中的一行。問題是它只占用了該部分的一個正方形而不是整個行。我相信我以前做過，但我不記得我是怎么做的（當然）。我認為這很容易實作，但我想不會。到目前為止，這是我的代碼：
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
#bg-img {
background-color: #E6F1FF;
background-image: url('http://placekitten.com/600/800');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 20%;
background-size: cover;
color: #323840;
height: 1148px;
}
.value-heading {
color: #323840;
text-align: center;
font-size: 34px;
font-family: 'Inter-SemiBold', Arial, sans-serif;
font-weight: 600;
line-height: 41.15px;
}
.value-description {
font-family: 'Inter-Regular', Arial, sans-serif;
color: #323840;
text-align: center;
font-size: 24px;
line-height: 36px;
}
.section-heading {
color: #043B7C;
text-align: center;
font-size: 46px;
font-family: 'Inter-Medium', Arial, sans-serif;
font-weight: 500;
line-height: 60px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div class="container marketing" >
<div id="bg-img">
<div class="pricing-header mx-auto text-center" >
<h1 class="display-4">header</h1>
</div>
<div class="row">
<div class="col-lg-4 ml-n5">
<img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
</div>
<div class="row">
<div class="col-lg-4 ml-n5">
<img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
</div>
</div>
<!-- /.row -->
</div>
</main>鏈接到 Codepen
uj5u.com熱心網友回復：
我沒有很好地回答你的問題，但如果你問的是背景，為什么它沒有占據整個部分，我相信會發生這種情況，因為你選擇了肖像影像，你必須使用風景影像
background-image: url(https://www.adorama.com/alc/wp-content/uploads/2018/11/landscape-photography-tips-yosemite-valley-feature.jpg);uj5u.com熱心網友回復：
如果您希望背景影像出現在row類中，則將其放入其中，而不是將其放入您的 id 元素中bg-img。檢查下面的片段以供參考。
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
.row {
background-color: #E6F1FF;
background-image: url('http://placekitten.com/600/800');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 20%;
background-size: cover;
color: #323840;
height: 1148px;
width: 100%;
margin: 0;
}
.value-heading {
color: #323840;
text-align: center;
font-size: 34px;
font-family: 'Inter-SemiBold', Arial, sans-serif;
font-weight: 600;
line-height: 41.15px;
}
.value-description {
font-family: 'Inter-Regular', Arial, sans-serif;
color: #323840;
text-align: center;
font-size: 24px;
line-height: 36px;
}
.section-heading {
color: #043B7C;
text-align: center;
font-size: 46px;
font-family: 'Inter-Medium', Arial, sans-serif;
font-weight: 500;
line-height: 60px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div class="marketing" >
<div id="bg-img">
<div class="pricing-header mx-auto text-center" >
<h1 class="display-4">header</h1>
</div>
<div class="row">
<div class="col-lg-4 ml-n5">
<img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
</div>
<div class="row">
<div class="col-lg-4 ml-n5">
<img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
<h2 class="mt-3 value-heading">header</h2>
<p class="value-description">info</p>
</div>
<!-- /.col-lg-4 -->
</div>
</div>
<!-- /.row -->
</div>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/407961.html
標籤：