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

05.01.12 NMitra

Ранее рассмотрели как написать текст на изображении в Фотошопе, теперь же время сделать это средствами 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;

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

position:relative; overflow: hidden;

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

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;

Теперь приоритетным будет тот блок, который расположен ниже в коде, в данной случае белый Б. Для того, чтобы изменить естественный порядок, мы используем 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.

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 )