CSS наложение: как написать текст на изображении

Ранее рассмотрели как написать текст на изображении в Фотошопе, теперь же время сделать это средствами CSS.

Благодаря тому, что мы задаём внешнему элементу position: relative, а внутреннему position: absolute, один блок ложиться поверх другого. В качестве примера возьмём светлый и темный прямоугольник:
<style type="text/css">
  .temnyi { background-color: #666; height: 150px; width:500px; }
  .svetlyi { background-color: #ccc; height: 50px; width: 250px; }
</style>

<div class="temnyi">
  <div class="svetlyi"></div>
</div>

Указав свойство position, мы не увидим изменений, но теперь светлый блок будет перемещаться в рамках тёмного благодаря свойствам left, top, right и bottom. Например, поместим светлый прямоугольник по центру тёмного
<style type="text/css">
  .temnyi { background-color: #666; height: 150px; width:500px; position: relative;}
  .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; left: 125px; top: 50px;}
</style>

<div class="temnyi">
 <div class="svetlyi"></div>
</div>
125px
50px

Вышеуказанные свойства могут принимать отрицательные значения. Тогда элемент выходит за границы тёмного прямоугольника.
<style type="text/css">
  .temnyi { background-color: #666; height: 150px; width:500px; position: relative;}
  .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; right: -125px; top: 50px;}
</style>

<div class="temnyi">
<div class="svetlyi"></div>
</div>
125px

position: absolute и position:relative

Поскольку HTML код веб-документа представляет из себя матрёшку, где один элемент находится внутри другого, то посмотрим на ситуацию в целом. Например, с четырьмя слоями. Точкой отсчёта для свойств top, bottom, right, left является граница родительского элемента с position не в значении static (по умолчанию).
<style type="text/css">
  .temnyi2 { background-color: #222; padding: 25px 20px; display: inline-block; }
  .temnyi1 { background-color: #444; padding: 25px 20px; display: inline-block; }
  .temnyi { background-color: #666; height: 150px; width:500px; position: relative; }
  .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; right: -125px; top: 0px;}
</style>

<body>
.....
  <div class="temnyi2">
    <div class="temnyi1">
      <div class="temnyi">
        <div class="svetlyi"></div>
      </div>
    </div>
  </div>
.....
</body>
position:relative;


position:relative;


position:relative;


position:relative;
position:relative;


Отрицательные значения смещают светлый блок на территорию другого контейнера. Но эту часть блока мы не увидим, коли будет добавлено свойство overflow: hidden.
position:relative; overflow: hidden;


Если же нужно показать только часть светлого блока, неравномерно убрав ненужные пиксели, то используется свойство clip: rect(вверх, вправо, вниз, влево); которое не применимо без position: absolute. auto показывает, что сторона остаётся без изменений.
свойство clip
position:relative;
clip: rect(auto, 200px, auto, 30px);

Взаимодействие блока с position: absolute с другими элементами

Мы можем в одном блоке разместить несколько элементов. Для удобства восприятия, не буду указывать попутные свойства.
<style type="text/css">
  .temnyi {position: relative;}
  .svetlyi1 {}
  .svetlyi2 {}
</style>

<div class="temnyi">
 <div class="svetlyi1">А</div>
 <div class="svetlyi2">Б</div>
</div>
А
Б

Если блоку А присвоить position: absolute, то блок Б расположиться так, словно блока А не существует - он займёт его место. Блок А уже не сможет влиять на положение блока Б ни посредством float: left, ни своей площадью, словно он парит над ним.
<style type="text/css">
  .temnyi {position: relative;}
  .svetlyi1 {position: absolute; left: 125px; top: 30px;}
  .svetlyi2 {}
</style>

<div class="temnyi">
 <div class="svetlyi1">А</div>
 <div class="svetlyi2">Б</div>
</div>
А
Б

Блок А перекрывает блок Б. Но стоит второму добавить position в значении relative, absolute или fixed, как ситуация измениться.
position: absolute;
position: relative;

position: absolute;
position: absolute;

Теперь приоритетным будет тот блок, который расположен ниже в коде, в данной случае белый Б. Для того, чтобы изменить естественный порядок, мы используем z-index. Чем больше значение этого параметра, тем выше находится элемент. Стоит помнить лишь то, что для position: static это свойство игнорируется (искл. свойство transform) и то, что в IE существует один изъян.
<div style="position: relative;">
  <div style="position: absolute; left: 125px; top: 30px; z-index: 2;"> А </div>
  <div style="position: absolute; z-index: 1;"> Б </div>
</div>
А
Б

Поскольку элементы не могут влиять на положение друг друга, то без указания для них значений (или если значения одинаковы) top, bottom, right, left, transform: translate и margin, ложатся друг поверх друга. А высота родительского блока, коли она не установлена фиксировано, равна нулю. На этом принципе основаны многие вещи, в том числе CSS табы.
<style type="text/css">
  .temnyi {position: relative;}
  .svetlyi1 {position: absolute;}
  .svetlyi2 {position: absolute;}
  .temnyi:hover .svetlyi2 {display: none;}
</style>

<div class="temnyi">
 <div class="svetlyi1">А</div>
 <div class="svetlyi2">Б</div>
</div>
А
Б

width (ширина) и position: absolute

width (или height) не применяется для большинства встроенных элементов. Имеет по умолчанию значение auto, что для блочного элемента равнозначно width: 100%.
<style type="text/css">
  .temnyi {text-align: center;}
  .svetlyi {}
</style>

<div class="temnyi">
<div class="svetlyi">Блочный</div>
Вст<span class="svetlyi" style="width: 250px;">роен</span>ный
</div>
Блочный
Встроенный

Но не при position: absolute. Здесь блочный элемент не будет растягиваться на ширину родительского элемента. Зато встроенные элементы займут указанную ширину. Но на них по прежнему будут влияют такие свойства, как text-align (обратите внимание на эту статью).
<style type="text/css">
  .temnyi {position: relative; text-align: center;}
  .svetlyi {position: absolute;}
</style>

<div class="temnyi">
Вст<span class="svetlyi" style="width: 250px; top: 60px;">роен</span>ный
<div class="svetlyi"></div>
</div>
Блочный
Встроенный

width: 100%; для обоих - это ширина родителя, для которого задано позиционирование отличное от static.
<style type="text/css">
  .temnyi {text-align: center; position: relative;}
  .svetlyi {width: 100%; position: absolute;}
</style>

<div class="temnyi">
<div class="svetlyi">Блочный</div>
Вст<span class="svetlyi" style="top: 60px;">роен</span>ный
</div>
Блочный
Встроенный

Если width не задано, но есть указание противоположных значений left и right, то блок растянется на всю ширину между этими двумя точками. Иначе right будет проигнорирован.
<style type="text/css">
  .temnyi {position: relative;}
  .svetlyi1 {left: 10%; right: 10%; position: absolute; text-align: center;}
  .svetlyi2 {left: 10%; right: 10%; top: 60px; width: 250px; position: absolute; text-align: center;}
</style>

<div class="temnyi">
<div class="svetlyi1">Блочный</div>
Вст<span class="svetlyi2">роен</span>ный
</div>
Блочный
Встроенный

Пример как написать текст на изображении.

Указанные ниже образцы продемонстрируют возможности применения CSS наложения.
Лес и поле белые,
Белые луга.
У осин заснеженных
Ветки как рога.

Подо льдами крепкими
Дремлют воды рек.
Белыми сугробами
Лег на крыши снег.

В небе звезды яркие
Водят хоровод.
Старый год прощается -
Входит Новый год.
Е. Трутнева.
<div style="position: relative;">
<img border="0" height="311" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/SvOib3RrGYI/AAAAAAAAMR4/54xSeZkhPi8/s1600/ice_storm.jpg" width="465" alt="Ветка во льду"/>
<div style="font-family: Courier; font-size: 80%; left: 50px; position: absolute; top: 30px; width: 150px; text-indent: 0px;">стих</div>
<div style="font-family: Courier; font-size: 80%; left: 340px; position: absolute; top: 290px; width: 150px;">автор</div>
</div>

Образец как наложить один текст на другой.

Пример
Образец
<style type="text/css">
#superponer {
  position: relative;
  text-align: center;
}

#superponer h5 {
  color: #fcda54;
  font-family: Georgia;
  font-size: 140px;
  letter-spacing: -6px;
  margin: 0;
  opacity: .9;
  padding: 0;
  -moz-transform: skew(20deg);
  -o-transform:skew(20deg);
  -webkit-transform: skew(20deg);
}

#superponer h6 {
  z-index: 100;
  color: #4682b4;
  font-family: Verdana;
  font-size: 60px;
  letter-spacing: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 26px;
  left: 120px;
}

#superponer h6 > span {
  display: inline-block;
  color: #ff6666;
  font-family: Times New Roman;
  font-size: 100px;
  font-style: italic;
  text-shadow: 3px 3px 1px #000000;
}

#superponer > h6:hover span {
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -webkit-transform: scale(2);
  zoom: 2;
}
</style>

<div id="superponer"><h5>Пример</h5><h6>Обр<span>а</span>зец</h6></div>

Пример как разместить текст поверх изображения на HTML

CSS наложение
Как написать текст на изображенииЭтот вариант приобретает всё большую популярность и возможен благодаря наложению одного слоя на другой с помощью свойств CSS
<style>
.imgteaser { /* общий блок */
  position: relative;
  display: table;
  margin: 0 auto;
  border: 10px solid #456;
  line-height: 0;
  color: rgb(223,223,223);
  cursor: pointer;
}

.imgteaser:after { /* "подробнее" */
  content: "подробнее \bb";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  background: rgba(17,34,51,.6);
  line-height: 1.6em;
}
.imgteaser:hover:after {content: none;}

.imgteaser figcaption {display: none;}
.imgteaser:hover figcaption { /* прозрачная область */
  display: block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 5px 10px;
  background: rgba(68,85,102,.7);
  font-size: 80%;
  line-height: 1.3em;
}

.imgteaser:hover figcaption strong { /* заголовок */
  display: block;
  line-height: 2em;
  font-size: 110%;
}
</style>

<figure class="imgteaser">
    <img height="600" width="539" src="http://4.bp.blogspot.com/-JT5diAXNGw4/TaQPTlnr2oI/AAAAAAAABto/jqJRCIzwQOo/s600/kon.jpg" alt="конь"/>
    <figcaption><strong>ЗАГОЛОВОК</strong>прозрачная область</figcaption>
</figure>


По материалам http://vagabundia.blogspot.com.

Похожие статьи:
  1. CSS наложение рисунков
Прозрачность CSS
в f t
наверх ↑

30 комментариев:

Евгений Xstroy
Образец с вырастающей буквой порадовал.
Уже как-то использовал слои для сбора шапки строительного сайта, но не думал таким образом их юзать.
Спасибо за интересное решение.
Анонимный
Замечательная информация, большое спасибо автору!!!
NMitra
Благодарю за добрые слова!
Анонимный
ОГРОООМНОЕ Вам спасибо!!!!!
NMitra
Приятно слышать!
Анонимный
Замечательный блог. Рада, что его нашла. Особенно нравится манера изложения материала: систематизированно, коротко, четко и по теме - без этого словоблудия и надоевших вымученных шуточек, от которых уже подташнивает. Спасибо.
NMitra
Рада быть полезной. За собой стала замечать, что невольно начинаю копировать других блоггеров. Чур меня )))
Анонимный
Спасибо большое многое помогло!
Анонимный
Спасибо за пост. Очень информативно! Еще раз спасибо :)
Анонимный
Как же я рад, что попал на на эту статью! Пример с лошадью - это то, что мне было нужно, прямо точь в точь. Я очень счастлив!
NMitra
Значит примеры размещаю не зря)))
Анонимный
огромное спасибо очень нужный материал разложен по полкам,
может я канешно и глупый вопрос задам но подскажите пожалуйста как выставить последний пример со всеми значениями в центральном положении
благодарю за полезный материал
NMitra
Подправила код последнего примера прямо в статье.
MIKTTD
Во первых - Спасибо за шпаргалку! В предпоследнем примере зум буквы "а" не работает, поправьте пожалуйста (самому знаний не хватает). И еще там-же для ІЕ нужно добавить: "transform: skew(20deg)".
NMitra
Поправила, когда писала статью, о поддержке IE можно было только мечтать. Сейчас можно применить префикс -ms-
Анонимный
Почему то не работает в IE всплывающий текст. Как можно решить? Спасибо за помощь.
NMitra
В каком именно примере?
Анонимный
Спасибо большое
Анонимный
Самое толковое о position из всего, что я до сих пор встречал.
Анонимный
ужасное решение некорректно работающее в ИЕ
Анонимный
Спасибо за работу, достойное изложение, в закладки
NMitra
Благодарю за отзывы!
Николай Березин
четкое, предельно ясное изложение, лайк и в закладки!
NMitra
Спасибо!
Юля
Шикарный пост!!! Спасибо!!! Очень долго искала как наложить текст на картинку.. кучу сайтов пересмортрела.. то css, то php надо править, то все вместе... километры кодов и непонятно будет ли толк.. А тут все быстро и просто !!! Жаль что сразу не нашла эту статью)))
NMitra
Спасибо! Такие комментарии помогают находить силы и время, а главное желание на дальнейшее ведение блога!
Сергей Ожерельев
Спасибо. Никак не мог понять, как наложить слой на слой
NMitra
Рада помочь!
Unknown
А в масштабируемой картинке как сделать текст, чтобы он масштабировался вместе с картинкой на резиновом шаблоне?
NMitra
Пример: https://jsfiddle.net/kdtok1au/

.imgteaser { /* общий блок */
position: relative;
display: table;
max-width: 100%;
margin: 0 auto;
line-height: 0;
color: rgb(223,223,223);
cursor: pointer;
}
.imgteaser figcaption {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(68,85,102,.7);
font-size: 80%;
line-height: 1.3em;
}
.imgteaser img {
width: 100%;
height: auto;
}

Для уменьшения размера шрифта: либо SVG, либо vw ( http://shpargalkablog.ru/2013/03/px-em-calc.html )