Как наложить текст на картинку в html?

#html #текст #img

   
    
        
        
    	
Космоинфо
        
Погрузись в космос вместе с нами!
        
Новости    Вопросы
  Основная
    





надо, чтобы  и  отображались прямо на картинке, а не под ней.
    

Ответы

Ответ 1



   
    
        
        
    	
Космоинфо
        
Погрузись в космос вместе с нами!
        
Новости    Вопросы
  Основная
    



Ответ 2

Попробуй задать как фоновое изображение через CSS/SASS.

В .sass:

.image{
    background: url('image/image1.png');
    width: 320px;
    height: 280px; //размер условный
}


В HTML-документе:


      
Текст Текст Текст
 


Ответ 3

Вариант 1, с использованием position: absolute


.container {
position: relative;
}
.container img {
position: absolute;
}
.container p{
color: #fff;
position: relative;
}


Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla? 
	





Вариант 2, с использованием background-image (нужно знать размеры блока)



.bg {
background: url('https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg')
center center no-repeat;
width: 300px;
height: 300px;
}
.bg span {
color: #fff;
}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, rerum.