Как можно получить текст на изображении, не используя "position:absolute"?

Question

Как можно получить текст на изображении, не используя "position:absolute"?

Это единственный способ получить текст на изображениях? позиция: абсолютная; верх:0; (в 0 или где-нибудь изображение..)

Есть ли другой способ сделать это?

-3

css image text position

Источник

user8936456 06 дек '17 в 05:06

1 ответ

Решение

Другие вопросы по тегам css image text position

user1388544 06 дек '17 в 05:47 2017-12-06 05:47 · Accepted Answer · 2017-12-06 05:47

В зависимости от макета HTML, есть и другие варианты. Используйте фоновое изображение, как сказал тост в комментарии. Также можно использовать отрицательную маржу. Как этот пример:

.myimage{
  background:red;
  display:block;
  margin-bottom: -50px;
}
    
.mytext{
  color:white;
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red block" width="100" height="100" class="myimage" />
<div class="mytext">
[SOME TEXT]
</div>