Обучение/Помощь новичкам | Вопрос по вёрстке
pyrokinesis
Как сделать чтобы в блоке текст выводился СВЕРХУ на картинке, не занимая место и не сдвигал картинку?
Вот стили блока:
.ava {
border: 2px solid #000000;
border-radius: 13px;
font-size: 8px;
width: 60px;
height: 60px;
text-align: center;
background: #2b2727;
}
Вот код:
echo '<div class="ava"><img src="/images/'.$user['ava'].'.png" width="50px" height="100%"; /></div>';
И скрин, как выглядит с текстом, а нужно чтобы текст выводился на картинке не смещая её. Я знаю про"слои", это нужно в span'e установить?
------
54036_Screenshot_20180215153920.png (522.1 Kb)
Скачиваний: 82
Holter Вот стили блока:
.ava {
border: 2px solid #000000;
border-radius: 13px;
font-size: 8px;
width: 60px;
height: 60px;
text-align: center;
background: #2b2727;
}
Вот код:
echo '<div class="ava"><img src="/images/'.$user['ava'].'.png" width="50px" height="100%"; /></div>';
И скрин, как выглядит с текстом, а нужно чтобы текст выводился на картинке не смещая её. Я знаю про"слои", это нужно в span'e установить?
Изображение
------
54036_Screenshot_20180215153920.png (522.1 Kb) Скачиваний: 82
А вот без текста, нужно чтобы так и осталосьа текст "сверху"
------
54037_Screenshot_20180215153951.png (525.7 Kb)
Скачиваний: 74
Изображение
------
54037_Screenshot_20180215153951.png (525.7 Kb) Скачиваний: 74
Holter , есть несколько способов, 1 это класс ava сделать как position: relative; а текст с абсолютной позицией, второй способ картинку поставить как фоновое изображение класса ava
