0

Всем привет! Вот есть такая структура:

<div class="box">
   <img src="jpg.jpg">
   <span>123</span>
</div>

Получится, что-то вроде этоговведите сюда описание изображения

Как мне сделать так, чтобы тег span был на картинке? Если можно то без position:absolute

1
  • в иерархии сначала img потом span и transform:translate(); и всё Commented 19 окт. 2018 в 16:09

2 ответа 2

0

Работает при любом размере экрана

html,body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.picText {
  display: flex;
  width: 300px;
}

.picText > span {
  position: absolute;
  margin-top: 200px;
  margin-left: 70px;
  font-size: 30px;
}
<body>
  <div class="picText">
    <img src="http://placehold.it/300/cc0" alt="">
    <span>lorem ipsum</span>
  </div>
</body

Второй вариант:

html,body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.picText {
  display: flex;
  justify-content: center; /*Выравнивание по горизонтали*/
  align-items: center; /*Выравнивание по вертикали*/
 
  width: 300px;
  height: 300px;
  background-image: url("http://placehold.it/300/cc0");
  background-repeat: no-repeat;
  background-size: cover;
  
  
}

.picText > span {
  margin-top: 100px;
  font-size: 29px;
}
<body>
  <div class="picText">
    <span>lorem ipsum</span>
  </div>
</body

0

смотреть на всё страницу

div {
  margin: 50px;
}

span {
  display: inline-block;
  transform: translate(-305px, -140px);
  font-size: 50px;
  font-weight: 900;
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}
<div>
  <img src="http://placehold.it/300/cc0" alt="">
  <span>lorem ipsum</span>
</div>

Ваш ответ

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

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