10 февраля 2016      33910      3

Текст поверх изображения. HTML + CSS

Каждый день на форумах html новички спрашивают: «Как разместить текст поверх изображения?». Некоторые находят неправильный выход: они рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.

Используя методы, описанные в уроке, мы можем получить такой результат:

1

Подготовка

Возьмём картинку

bg

Её размер — 350px × 200px. И этой информации достаточно для того, чтобы приступить к работе.
Теперь попробуем разместить поверх неё текст несколькими способами.

Способ первый: картинка как фон div

Сразу оговорюсь, что этот способ мне самому не нравится из-за примитивного конечного результата, но тем не менее он существует, поэтому я расскажу о нём.

Суть способа заключается в том, что мы берём тег div, задаём ему размеры, совпадающие с размером изображения, и устанавливаем картинку в качестве фона.
Обратите внимание, что размер тега = собственный размер + размер отступов padding. Таким образом, если мы хотим сделать отступ содержимого от края картинки на 20px, то размер самого div нужно указать на эти 20px меньше. То есть: 350-20 = 330 в ширину и 200-20 = 180 в высоту.



<div class="example1">Текст</div>



.example1 {
		padding-top:20px;
		width:330px;
		padding-left:20px;
		height:180px;
		background-image:url("/examples/20120821/bg.png");
		
		/*оформление текста*/
		color:#FFF;
		font-family:Arial, Helvetica, sans-serif;
		font-size:40px;	
	}

Результат:

2

Способ простой по структуре хтмл кода (требуется всего один тег), но зато он не позволяет задать тексту какие-то особые стили. В результате чего может получиться так, что текст будет сложно прочитать. Кроме того, блок жёстко привязан к размерам картинки, а значит, в случае изменения картинки придётся переписывать и css

Способ второй: наложение двух тегов друг на друга

Суть этого способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого верхнего угла контейнера.


<div class="example2">
    <img src="/examples/20120821/bg.png" class="example_beauty">
    <span>Текст</span>
</div>


.example2 {
	display:inline-block;	
	position:relative;

}
.example2 span {
	display:inline-block;
	position:absolute;
	top:30px;	
	left:0px;
	
	/* Оформление текста */
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;	
	
	/* Фон */
	background-color:rgba(0,0,0,.4);
	padding:10px 30px;
}

.example2:
display:inline-block нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
position:relative заставляет все вложенные блоки с position:absolute вести отсчёт координат своего положения не от окна браузера, а от блока .example2.

.example2 span:
display:inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
position:absolute — для вынимания тега из общего потока и дальнейшего его размещения с помощью задачи конкретных координат. top, left — отступы сверху и слева (координаты). возможно вместо них использовать bottom (снизу) и right (справа)

Результат:

3

Минусом этого способа является то, что нарушается семантика кода, появляется много лишних тегов. Но зато он не привязан к размерам картинки, он позволяет делать фон у текста, делая его более читаемым, да и вообще даёт нам полную свободу в настройке стилей.




Играя с css и структурой тегов можно добиться и такого результата:

1

Данный результат довольно неплохо подходит для оформления галлерей, витрин интернет-магазинов и прочих сервисов.

Код последнего результата:


<div class="example3">
    <img src="/examples/20120821/bg.png" class="example_beauty" />
    

<div class="example_text">

<h6>Я - заголовок</h6>


        <span>А я - комментарий к этой прекрасной картинке. Я такой длинный, что занимаю несколько строчек.</span>
    </div>


</div>


.example3 {
	display:inline-block;	
	position:relative;
}
.example3 .example_text {
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	
	color:#fff;
		
	padding:10px;
	background-color:rgba(0,0,0,.3);

	
}
.example3 h6 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
}
.example3 span {
	font-size:12px;	
}
  • Анастасия Сычева

    Спасибо, очень помогло!!

  • Daess Alecto

    Если вы захочели сглаженные края, вот вам недостающий кусок кода

  • юирй

    Спасибо вам огромное

Все темы на сайте

© 2017 BorPost · Копирование материалов сайта без разрешения запрещено