Html 图像块重叠设计问题

早上好

我目前在对齐具有背景图像的容器内的div时遇到问题。目前他们并排坐着，我无法让他们正确对齐，我附上了一张我试图实现的图像，它在那里，但我只需要对齐才能正常工作：（-有人能给我指出正确的方向吗

提前谢谢

我正在努力实现的目标：

.card{
位置：相对位置；
显示器：flex；
对齐项目：居中；
浮动：左；
边际：（30px）0；
宽度：45%；
@媒体#{$BPD}{
利润率：2.5%；
}
@媒体#{$MaxBPD}{
宽度：100%；
}
&：之前{
内容：“；
宽度：1px；
左边距：-1px；
浮动：左；
身高：0；
@媒体#{$BPD}{
填料顶部：30px/30px*100%；
}
}
&：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
}
.卡--cta{
@扩展卡；
显示：块；
填充：0！重要；
.卡-cta块{
显示：块；
填充：49px0；
边框底部：1px实心；
&：最后一个孩子{
边界底部：0；
}
}
.卡片--图像{
保证金：0；
}
}
.card.card--quote{
显示器：flex；
背景：白色；
填充：48px 24px；
边框：3倍纯黑；
对齐项目：居中；
@媒体#{$MaxBPB}{
填充：50px 25px；
}
img{
z指数：-1；
}
div{
宽度：100%；
文本对齐：居中；
氢{
边缘底部：49px；
线高：49px；
}
p{
利润率：30px0；
线高：30px；
}
}
}

块文本1
块文本2
块文本3

在如下所示的元素上添加2个（abc、def）类

<div class="card--cta abc">
      <div class="card card--image">
        <picture>
          <img src="//picsum.photos/400/400/?random" alt="" />
        </picture>
      </div>
      <div class="card card--cta def">
        <div class="card--cta-block">
          <h3>Block text 1</h3>
        </div>
        <div class="card--cta-block">
          <h3>Block text 2</h3>
        </div>
        <div class="card--cta-block">
          <h3>Block text 3</h3>
        </div>
      </div>
    </div>

这是你想要的吗

.card--cta{
位置：相对位置；
}
.divbox{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
.divbox div{
背景色：#fff；
边框：1px纯黑；
填充：20px；
}

块文本1
块文本2
块文本3

如果您愿意修改HTML结构，请尝试使用以下样式：

<div class="container ">
  <div style="font-size:36px; width:300px;margin: 0 auto;">
    <h3>Block text 1</h3>
    <h3>Block text 2</h3>
    <h3>Block text 3</h3>
  </div>
</div>
<style>
.container {
    /* The image used */
    background-image: url("//picsum.photos/400/400/?random");
    /* Set a specific height */
    min-height: 500px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

块文本1
块文本2
块文本3
.集装箱{
/*使用的图像*/
背景图像：url（“//picsum.photos/400/400/？random”）；
/*设定一个特定的高度*/
最小高度：500px；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}

这是我的想法，我最终切换了很多值，但我基本上使用flexbox来居中处理所有内容。但是我不知道它是否适用于编译后的CSS，因为您只提供了SCS

我添加的相关CSS位于底部

安威：这里是：

.card{
位置：相对位置；
显示器：flex；
对齐项目：居中；
浮动：左；
边际：（30px）0；
@媒体#{$BPD}{
利润率：2.5%；
}
@媒体#{$MaxBPD}{
宽度：100%；
}
&：之前{
内容：“；
宽度：1px；
左边距：-1px；
浮动：左；
身高：0；
@媒体#{$BPD}{
填料顶部：30px/30px*100%；
}
}
&：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
}
.卡--cta{
@扩展卡；
显示：块；
填充：0！重要；
.卡-cta块{
显示：块；
填充：49px0；
边框底部：1px实心；
&：最后一个孩子{
边界底部：0；
}
}
.卡片--图像{
保证金：0；
}
}
.card.card--quote{
显示器：flex；
背景：白色；
填充：48px 24px；
边框：3倍纯黑；
对齐项目：居中；
@媒体#{$MaxBPB}{
填充：50px 25px；
}
img{
z指数：-1；
}
div{
宽度：100%；
文本对齐：居中；
氢{
边缘底部：49px；
线高：49px；
}
p{
利润率：30px0；
线高：30px；
}
}
}
.卡--cta{
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.卡-cta块{
对齐项目：居中；
显示器：flex；
弹性：1；
证明内容：中心；
}
.card.card--cta{
高度：516px；
宽度：516px；
对齐项目：拉伸；
背景：#fff；
位置：绝对位置；
}

块文本1
块文本2
块文本3

感谢您的回复，因为某种原因，一旦添加到其中，它就会出错：（我刚刚为此编写了新的CSS。您需要将此CSS嵌入现有的SCSS代码中。感谢您的回复，因为某种原因，此操作不起作用：（您可以发布编译后的CSS吗..我无法使用此SCSS代码进行测试。）

<div class="container ">
  <div style="font-size:36px; width:300px;margin: 0 auto;">
    <h3>Block text 1</h3>
    <h3>Block text 2</h3>
    <h3>Block text 3</h3>
  </div>
</div>
<style>
.container {
    /* The image used */
    background-image: url("//picsum.photos/400/400/?random");
    /* Set a specific height */
    min-height: 500px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>