0

Как опустить текст на картинку,чтоб из этого получить это ? ( Грид не убирайте,он мне нужен будет )

введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения

 .giphone {
      text-align: center;
    }

    .gih1 {
      font-size: 44px;
    }

    .gih5 {
      font-size: 21px;
      font-family: 'sanfranciscolight';
      font-weight: 400;
    }

    .giphone-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    .giphone a {
      color: #0066cc;
      text-decoration: none;
      font-size: 21px;
    }

    .giphone a:hover {
      text-decoration: underline;
    }
<div class="giphone-wrapper">
    <div class="giphone">
    <h1>Перейти на iPhone
    <br>
     очень просто.</h1>
     <p><a href="#">Подробнее ></a></p>
     <div class="pgiphone">
        <img src="static/images/image.psd (7).png" alt="">
     </div>
     
    </div>
    <div class="giphone">
        <img src="static/images/image.psd (8).png" alt="">
        <h1 class="gih1">Конфиденциальность</h1>
        <h5 class="gih5">Только вам решать,
            <br>
            кому будут доступны ваши данные.</h5>
         <p><a class="gia" href="#">Подробнее ></a></p>
            <div class="pgiphone">
                <img src="static/images/image.psd (6).png" alt="">
            </div>
         
        </div>
</div>

2
  • Тут всё тоже самое и grid здесь никак не мешает. ".giphone" даёте "position: relative", а ".pgiphone" даёте "position: absolute" и прочие стили, которые должны быть у него. 24 мар в 11:29
  • не получается.Сделал все, как вы сказали
    – atr
    24 мар в 12:01

1 ответ 1

0

Воть, примерно так!

.giphone {
  text-align: center;
  position: relative;
}
.pgiphone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100;
  height: 100%;
  z-index: -1;
}

.gih1 {
  font-size: 44px;
}

.gih5 {
  font-size: 21px;
  font-family: 'sanfranciscolight';
  font-weight: 400;
}

.giphone-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.giphone a {
  color: #0066cc;
  text-decoration: none;
  font-size: 21px;
}

.giphone a:hover {
  text-decoration: underline;
}
.pgiphone img {
  display: block;
  width: 100%;
  height: 100%;
  background-color: yellow;
  object-fit: cover;
}
<div class="giphone-wrapper">
    <div class="giphone">
    <h1>Перейти на iPhone
    <br>
     очень просто.</h1>
     <p><a href="#">Подробнее ></a></p>
     <div class="pgiphone">
        <img src="static/images/image.psd (7).png" alt="">
     </div>
     
    </div>
    <div class="giphone">
        <img src="static/images/image.psd (8).png" alt="">
        <h1 class="gih1">Конфиденциальность</h1>
        <h5 class="gih5">Только вам решать,
            <br>
            кому будут доступны ваши данные.</h5>
         <p><a class="gia" href="#">Подробнее ></a></p>
            <div class="pgiphone">
                <img src="static/images/image.psd (6).png" alt="">
            </div>
         
        </div>
</div>

2
  • у меня другой див налезает на этот ( в вопрос добавил фото )
    – atr
    24 мар в 13:03
  • На самом деле он не налезает, просто в верхнем мало контента, а из-за того, что картинка стала абсолютом, она потеряла вес и высоту блокам стали задавать только тексты. Поэтому в giphone-wrapper вам нужно сделать min-height сколько вам требуется. 25 мар в 5:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.