CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 254   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

0

Текст поверх картинки на CSS

Jemand 58830
CSS

Хороший способ подписать и украсить картинку. Можно добавлять как текст, так и еще одну картинку.
1. !DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. CSS

.image {
	position: relative;
	width: 100%; /* для IE 6 */
	}

h2 {
	position: absolute;
	top: 466px;
	left: 0;
	width: 100%;
	}
h2 span {
	color: #fff;
	font-size: 30px;
	line-height: 55px;
	background: rgba(0, 0, 0, 0.7);
	background: #000;
	padding: 10px 10px 10px 16px;
	}

3. HTML

<div class="image">
	<img src="image.jpg" alt="" />
	<h2><span>Сэр Шрек,&nbsp;&nbsp;<br />&nbsp;&nbsp;Кот в сапогах и Осёл.</span></h2>
</div>

Неразрывные пробелы &nbsp добавлены для того, чтобы background текста не заканчивался после последнего символа в первой строке, и чтобы текст не прилипал к левому краю блока во второй строке.
К сожалению в Internet Explorer прозрачность бэкграунда, в данном примере, не наблюдается.

Демо

Рекламная пауза

Оставить комментарий