Как добавить текст поверх фото в HTML?

250

Примерно так:

 <style> 
    .out { 
        width:250px; 
        height:250px; 
        background-size:contain; 
        border-radius:10px; 
        color:#fff; 
        position:relative; 
    } 
    .in { 
        position:absolute; 
        bottom:20px; 
        left:20px; 
    } 
</style> 
<div class="out" style="background-image:url(https://i5.photo.2gis.com/images/geo/0/30258560047491166_e100_600x600.jpg);"> 
    <span class="in">Москва</span> 
</div> 

 в твоём коде
текст на фото
слева

надо
по центру 

 если делать то вот так 

 ещё можно
жирнее шрифт сделать 

Есть два принципиальных способа. 1). через пару вложенных контейнеров relative-absolute (пример выше). 2). используя позиционирование flexbox/grid и изображение в фоне.


Кроме этого здесь наложен градиент для затемнения, чтобы текст не сливался с фоном.


Второй способ с градиентом: https://codepen.io/VISTASTER/pen/raBQYpL