图像出现块重叠设计问题

Question

早上好

我目前在对齐具有背景图像的容器内的div时遇到麻烦。目前他们并排坐着，我无法让他们正确对齐，我已经附上了我想要实现的图像，虽然有点像，但是我只需要对齐才能正常工作:( -谁能指出我正确的方向？

谢谢！

我要实现的目标：

    .card {
        position: relative;
        display: flex;
        align-items: center;
        float: left;
        margin: (30px) 0;
        width: 45%;

        @media #{$BPD} {
            margin: 2.5%;
        }

        @media #{$MaxBPD} {
            width: 100%;
        }

        &:before {
            content: "";
            width: 1px;
            margin-left: -1px;
            float: left;
            height: 0;

            @media #{$BPD} {
                padding-top: 30px / 30px * 100%;
            }
            
        }

        &:after {
            content: "";
            display: table;
            clear: both;
        }
    }

    .card--cta {
        @extend .card;

        display: block;
        padding: 0 !important;

        .card--cta-block {
            display: block;
            padding: 49px 0;
            border-bottom: 1px solid;

            &:last-child {
                border-bottom: 0;
            }
        }

        .card--image {
            margin: 0;
        }
    }


    .card.card--quote {

        display: flex;
        background: $brand-white;
        padding: 48px 24px;
        border: 3px solid black;
        align-items: center;


        @media #{$MaxBPB} {
            padding: 50px 25px;
        }
        
        img {
            z-index: -1;
        }

        div {
            width: 100%;
            text-align: center;

            h2 {
                margin-bottom: 49px;
                line-height: 49px;
            }

            p {
                margin: 30px 0;
                line-height: 30px;
            }
        }
    }

    <div class="card--cta">
      <div class="card card--image">
        <picture>
          <img src="//picsum.photos/400/400/?random" alt="" />
        </picture>
      </div>
      <div class="card card--cta">
        <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>

Answer 1

在下面显示的元素上添加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>

并添加这两种样式

.abc {
    position: relative;
}
.def {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

Answer 2

这是您想要的吗？

.card--cta{
  position: relative;
}
.divbox{
  position:absolute;
  top: 0;
  left : 0;
  width : 100%;
  height: 100%;
  display : flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.divbox div{
  background-color: #fff;
  border: 1px solid black;
  padding: 20px;
}

    <div class="card--cta">
      <div class="card card--image">
        <picture style="width: 100%;">
          <img style="width: inherit;" src="//picsum.photos/400/400/?random" alt="" />
        </picture>
      </div>
      <div class="card card--cta divbox">
        <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>

Answer 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>

Answer 4

这就是我的想法，最终我切换了很多值，但是我基本上使用flexbox将所有内容居中。但是我不知道它是否可以与您编译的CSS一起使用，因为您只提供了SCSS。

我添加的相关CSS在底部。

这里是：

.card {
  position: relative;
  display: flex;
  align-items: center;
  float: left;
  margin: (30px) 0;
  @media #{$BPD} {
    margin: 2.5%;
  }
  @media #{$MaxBPD} {
    width: 100%;
  }
  &:before {
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    @media #{$BPD} {
      padding-top: 30px / 30px * 100%;
    }
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.card--cta {
  @extend .card;
  display: block;
  padding: 0 !important;
  .card--cta-block {
    display: block;
    padding: 49px 0;
    border-bottom: 1px solid;
    &:last-child {
      border-bottom: 0;
    }
  }
  .card--image {
    margin: 0;
  }
}

.card.card--quote {
  display: flex;
  background: $brand-white;
  padding: 48px 24px;
  border: 3px solid black;
  align-items: center;
  @media #{$MaxBPB} {
    padding: 50px 25px;
  }
  img {
    z-index: -1;
  }
  div {
    width: 100%;
    text-align: center;
    h2 {
      margin-bottom: 49px;
      line-height: 49px;
    }
    p {
      margin: 30px 0;
      line-height: 30px;
    }
  }
}

.card--cta {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card--cta-block {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
}

.card.card--cta {
  height: 516px;
  width: 516px;
  align-items: stretch;
  background: #fff;
  position: absolute;
}

<div class="card--cta">
  <div class="card card--image">
    <picture>
      <img src="//picsum.photos/600/600/?random" alt="" />
    </picture>
  </div>
  <div class="card card--cta">
    <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>