Как вставить текст во внутрь изображения?

Question

[misha979797]

Как вставить текст во внутрь изображения?

<div class="content1-down2 col-sm-4">
            <img src="img/vector-smart-object.png" alt="">
            <h4>15</h4>
            <p>Скидка<br>постоянным<br>клиентам</p>
          </div>

Картинка vector-smart-object.png :


попробовал через позиционариование и ничего не вышло
.content1-down2 img{
position: relative;
}
.content1-down2 h4{
position: absolute;
}

Comments

[DotDash]

Да много вариантов:
1. фотошоп
2. бекграунд
3. position absolute
и тд.

Answer 1

[Lam Besis]

Не очень понятно что именно вы имеете ввиду, но если вдруг я вас поняла, то вот.
Либо делайте эту картинку фоновым изображением:

.content1-down2 {
  background-image: url(../img/vector-smart-object.png);
}

Либо, если вам критически необходим в html-разметке, позиционируйте картинку абсолютно и растягивайте на размеры родителя:

.content1-down2 {
  position: relative;
}
img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

Comments

[misha979797]

а если размеры родителя больше?
то есть картинку вставляем как фон родителя, а текст в родителе который должен идти под картинкой -накладывается на неё
Простыми словами. Хочу поместить h4 текст во внутрь img

[Lam Besis]

misha979797, если вам нужно чтобы текст h4 был на фоне картинки, тогда не нужно добавлять в html-разметку img. В стилях добавьте тегу h4 свойство «background-image» и путь к картинке.

[misha979797]

Lam Besis, спасибо большое :)

Answer 2

[Артем Спиридонов]

Варианты навскидку:
- сделать изображение фоном div-а
- абсолютное позиционирование

Answer 3

[adrenalinruslan]

.content1-down2{
position: relative;
}
.content1-down2 h4{
position: absolute;
top: 0;
left:0;
}