Как разместить текст перед изображением - PullRequest
Новая
       0

Как разместить текст перед изображением

0 голосов
/ 26 марта 2020

Я новичок в кодировании и хочу разместить текст перед картинкой.

Я использую Komodo. Вот мой код:

CSS

HTML

My Code

Ответы [ 3 ]

0 голосов
/ 26 марта 2020

Это должно быть, пожалуйста, оставьте комментарий, если вам нужна дополнительная помощь. Это поместит текст поверх изображения и поместит его в центр. 

<div>
  <img src="">
  <h1>Text</h1> <!-- This will positon text over image -->
</div>

div {
  position: relative;
  text-align: center;
}
image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
0 голосов
/ 26 марта 2020

У меня есть решение для вас, но оно может быть реализовано различными способами. 

.bandeau {
  position: relative;
  text-align: center;
}

h1 {
  position: absolute;
  top: 10%;
  left: 20%;
  color: red;
}
h2 {
  position: absolute;
  top: 25%;
  left: 20%;
  color: red;
}
h3 {
  position: absolute;
  top: 40%;
  left: 20%;
  color: red;
}
<div id="bandeau">
   <div id="contenu">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" alt="photo d'aceuil">
      <h1>Pour ma nadette</h1>
      <h2>Mon amoureuse</h2>
      <h3>Je t'aime</h3>
  </div>
</div>

Я надеюсь, что смогу вам помочь

0 голосов
/ 26 марта 2020

Основываясь на ваших тегах, вот решение CSS. Добавьте это между вашими <head></head> тегами. 

<style>
   #contenu::after {
      content: "words";
   }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...