Как разместить текст на картинке

Question

HTML

<div class="boxs">
            <div class="box1">
                <a href = "#">
                  <div class="card-image"><img src = "images/m8 (4).png"></div>
                  <div class="body">
                    <div class="post_card_title">
                      <span itemid="headline">
                        <a href="#">
                          BMW M8
                        </a>
                      </span>
                    </div>
                  </div>
                </a>  
            </div>
            
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
            <div class="box5">5</div>
            <div class="box6">6</div>
          </div>

CSS

.boxs{
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}
.box1{
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
    width: 570px;
    height: 318px;
    padding: 20px;
}
.card-image{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-image img{
    width: 100%;
    height: 100%;
    display: block;
}

.body{
    justify-content: flex-end;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex-basis: 0;
    max-width: 100%;
}
.post_card_title{
    padding-top: 100px;
    color: #fff;
    font-size: 1.5em;
    z-index: 4;
}

Answer 1

Исправил! Изображение можно поместить в div как фон прописав background-image: url(ССЫЛКА);, при помощи background-size: ш в; выставляем размер картинки. Положение текста меняем параметрами padding-top, padding-left

  .boxs {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
  }
  .box1 {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
    width: 570px;
    height: 318px;
    padding: 20px;
  }
  .card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-image: url(https://avatars.mds.yandex.net/get-verba/997355/2a0000016dafcac8b4040fd237b43f1e9fcf/cattouchret);
    background-size: 570px 318px;
  }
  .post_card_title {
    padding-top: 282px;
    padding-left: 19px;
    color: #fff;
    font-size: 1.5em;
    z-index: 4;
  }

<div class="boxs">
  <div class="box1">
    <div class="card-image">
      <div class="post_card_title">
        BMW M8
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как разместить текст на картинке

Ответы (1 шт):