0

Как опустить текст на картинку,чтоб из этого получить это ?

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

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

.sila {
      text-align: center;
      font-size: 56px;
      font-weight: 1000;
      color: #1d1d1f;
    }

    .tsila {
      text-align: center;
      font-size: 21px;
    }

    .tsila h1 {
      font-size: 48px;
    }

    .tsila h5 {
      font-family: 'SanFranciscoLight';
      font-weight: 400;
      font-size: 21px;
    }

    .tsila a {
      color: #0066cc;
      text-decoration: none;
    }

    .tsila a:hover {
      text-decoration: underline;
    }
<div class="sila">
    <p>В чём сила iPhone?</p>
</div>

<div class="tsila">
    <h1>iOS 15</h1>
    <br>
<h5>На связи. В моменте.</h5>
<br>
<p><a href="#">Подробнее ></a></p>
</div>

<div class="psila">
    <img src="static/images/image.psd (5).png" alt="">
</div>

1 ответ 1

0

Вам нужно задать position: relative для .psila и position: absolute для .tsila:

<div class="sila">
    <p>В чём сила iPhone?</p>
</div>

<div class="tsila">
    <h1>iOS 15</h1>
    <br>
<h5>На связи. В моменте.</h5>
<br>
<p><a href="#">Подробнее ></a></p>
</div>

<div class="psila">
    <img src="static/images/image.psd (5).png" alt="">
</div>
        .sila {
            text-align: center;
            font-size: 56px;
            font-weight: 1000;
            color: #1d1d1f;
        }

        .tsila {
            text-align: center;
            font-size: 21px;
            position: absolute;
            z-index: 999;
        }

        .tsila h1 {
            font-size: 48px;
        }

        .tsila h5 {
            font-family: 'SanFranciscoLight';
            font-weight: 400;
            font-size: 21px;
        }

        .tsila a {
            color: #0066cc;
            text-decoration: none;
        }

        .tsila a:hover {
            text-decoration: underline;
        }
        
        .psila {
            position: relative;
        }
1
  • у меня текст под картинку уходит,как исправить
    – atr
    22 мар в 19:07

Ваш ответ

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

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