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

484
16 февраля 2018, 17:51

<!DOCTYPE html> 
<html> 
   <title> 
    	Наука.ру - главная 
    </title> 
    <body> 
        <style> 
    	    h1{text-align:center;} 
            h3{text-align:center;} 
        </style> 
        <img src = "https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg"> 
    	<h1>Космоинфо</h1> 
        <h3>Погрузись в космос вместе с нами!</h3> 
        <h2><pre><a href = "http://www.astronews.ru">Новости</a>    <a href = "https://www.gismeteo.ru">Вопросы</a>   <a href = "file:///home/danila/program.html">Основная</a></pre></h2> 
    </body> 
</html>

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

Answer 1

<!DOCTYPE html> 
<html> 
   <title> 
    	Наука.ру - главная 
    </title> 
    <body> 
        <style> 
    	    h1{text-align:center;color:white;} 
            h3{text-align:center;color:white;} 
            body{background-image:url("https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg");} 
        </style> 
         
    	<h1>Космоинфо</h1> 
        <h3>Погрузись в космос вместе с нами!</h3> 
        <h2><pre><a href = "http://www.astronews.ru">Новости</a>    <a href = "https://www.gismeteo.ru">Вопросы</a>   <a href = "file:///home/danila/program.html">Основная</a></pre></h2> 
    </body> 
</html>

Answer 2

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

.container { 
position: relative; 
} 
.container img { 
position: absolute; 
} 
.container p{ 
color: #fff; 
position: relative; 
}
<div class="container"> 
<img src="https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg" alt=""> 
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla? </p>	 
</div>

Вариант 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; 
}
<div class="bg"> 
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, rerum.</span> 
</div>

READ ALSO
Как написать правильный .bind()?
HTML

Как написать правильный .bind()?

Хочу отследить замену классаСуть в том, что класс меняется при скролле, когда скролю вниз - работает норм, но когда скролю вверх, то

 199
Можно ли увеличить checkbox без хаков на css? [требует правки]
HTML

Можно ли увеличить checkbox без хаков на css? [требует правки]

Доброго времени суток, возможно ли увеличить каким-либо образом стандартный checkbox без использования label?

 197
Сервлет не переходит на другую страницу
HTML

Сервлет не переходит на другую страницу

Класс который считает a*b

 174
JS Смена текста в кнопке
HTML

JS Смена текста в кнопке

Здравствуйте!

 223