我一直试图让我的行和列显示在背景图像上。我已经为此挣扎了一段时间。如有任何帮助，我们将不胜感激！
我对此也很陌生，所以，如果它很简单，我还没有找到它XD
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="about-us" class="">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/1920x618.png" alt=""></a>
<div class="container-md">
<div class="row justify-content-center">
<div class="col-4 about-text-header">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
</div>
</body>
</html>首先你需要更改图像路径我已经更改了图像路径。在css中给父div一个背景图像。
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<style type="text/css">
#about-us{
background-image: url('https://previews.123rf.com/images/melpomen/melpomen1904/melpomen190400312/120268255-e-learning-concept-with-person-using-a-laptop-on-a-white-table.jpg?fj=1');
}
</style>
</head>
<body>
<a href="https://placeholder.com">
<div id="about-us" class="p-5">
<div class="container-md">
<div class="row justify-content-center" style=" position: relative;">
<div class="col-4 text-light about-text-header">
First Column
</div>
<div class="col-4 text-light ">
Second Column
</div>
</div>
</div>
</div>
</a>
</body>
</html>
您可以使用CSS将图像作为块的背景。在您的style.css文件中：
#about-us {
background-image: url('https://via.placeholder.com/1920x618.png');
}
还有CSS属性来设置背景图像的位置、大小等。你可以在这里找到更多
编辑：根据你的意见，如果你想实现这个设计：
HTML:
<body>
<!-- Top image GTA, there is no text so it can be <img> tag -->
<div id="hero-img">
<img src="./yourimg.png" alt="">
</div>
<!-- About us section, with car in background -->
<div id="about-us">
<!-- Your regular columns and content -->
<div class="container-md">
<div class="row justify-content-center">
<div class="col-4 about-text-header">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
</div>
</body>
CSS：
#hero-img{
/* to remove space between images, because car image has this wave and page background would be visable */
margin-bottom: -50px;
}
#hero-img img{
object-fit: cover;
width: 100%
height: 600px;
}
#about-us{
background-image: url('./yourCarImage.png');
background-position: center;
background-size: cover;
/* probably padding needed */
padding: 100px 0;
}
这应该在一般情况下有效，根据您的需要进行调整。