Css текст на картинке

Текст или картинка, поверх картинки!

У меня недавно стал вопрос, как сделать текст поверх картинки. Тогда я мог с уверенностью сказать, что так сделать нельзя. И конечно же оказался неправ. Это реально сделать, причем не затрачивая на это много усилий! Потому что это самое простое что можно сделать…

И так, для начала создадим саму картинку.

<img src="url images" />

Есть картинка, поверха которой нужно сделать текст. Мы сделаем это с помощью «position». Но для начала, что оно из себя представляет.

Position — Устанавливает способ позиционирования, относительно родителя.

  • position: absolute; — задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя.

  • position: relative; — задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
  • position: static; — (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего «потока» текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание.
  1. Хм… Если вы делаете только одно изображение на всю страницу, то выгодно будет пользоваться absolute, так как он позволит выбрать положение по всему экрану.
  2. А если вам нужно будет сделать маленькую картинку в нутри тега <div> или в таблице, то лучше воспользоваться relative.

Мне нужно было сделать так как во втором примере. Делаем текст, который в дальнейшем будет находится на картинке. Вот пример:

<div width="10%"><!-- Див, в ктором находится наш текст и картинка --><br />
<img src="logo.jpg"><br />
<div>Текст поверх картинки</div><br />
</div>

После этого кода получается текст ниже картинки. Чтобы он стал на картинке, задаем ему position:relative;

<div width="100%"><br />
<img src="logo.jpg"><br />
<div style="position:relative;bottom:100px;">Текст поверх картинки</div><br />
</div><br />


bottom:100px; — показывает настройки расположения текста. Настраивайте под свой вкус ;).

Ну вот и все… Надеюсь полезен был урок!

С уважением, Vasilenko Ivan!

bitby.net

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align="center". Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Рисунок по центру</title>  <style type="text/css">  P.fig {  text-align: center; /* Выравнивание по центру */  }  </style>  </head>  <body>   <p class="fig">  <img src="images/sample.gif" width="200" height="100" alt="Иллюстрация">  </p>  </body> </html>    

В данном примере класс fig добавляется к селектору P, а способ выравнивания определяется свойством text-align. Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега <img> есть атрибут align, который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, для выравнивания по левому краю применяют left. Атрибут align часто используют в связке с другими атрибутами тега <img> — vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега <img>

   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Рисунок в тексте</title> </head> <body> <p><img src="images/sample.gif" width="100" height="200" alt="Иллюстрация" align="left" vspace="5" hspace="5"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>

Горизонтальный отступ от картинки до текста управляется атрибутом hspace, он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace.


Для обтекания картинки текстом также можно применить стилевое свойство float. Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Рисунок в тексте</title>  <style type="text/css">  IMG.fig {  float: right; /* Обтекание картинки по левому краю */  padding-left: 10px; /* Отступ слева */  padding-bottom: 10px; /* Отступ снизу */  }  </style>  </head>  <body>   <p><img src="images/sample.gif" width="100" height="200"   alt="Иллюстрация" class="fig">  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl   ut aliquip ex ea commodo consequat.</p>   </body> </html>    

В данном примере к тегу <img> добавляется класс fig, для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom.

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin.

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега <td>. В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

.    
t;table width="100%" cellspacing="0" cellpadding="0"> <tr> <td class="leftcol"><img src="images/igels.png" width="90" height="78" alt="Вы не поверите, но это ёжик"></td> <td valign="top">Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.</td> </tr> </table> </body> </html>

Результат примера показан на рис. 4.

Изображение слева от текста

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.


Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить свойство float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Рисунок на поле</title>  <style type="text/css">  #pic {  float: left; /* Обтекание картинки текстом */  }  #text {  margin-left: 110px; /* Отступ от левого края */  }  </style>  </head>  <body>   <div id="pic">  <img src="images/igels.png" width="90" height="78"   alt="Вы не поверите, но это ёжик">  </div>  <div id="text">  Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех,   кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное   и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами,   но только потому, что уступает им в размерах. А вот закусить червячком или даже   змеей ему вполне под силу.  </div>  </body> </html>    

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right, а свойство margin-left на margin-right.

htmlbook.ru

Код html:

<div class="container">   <img src="/images/article/21/bg.jpg" alt="background-image">   <div>Белым снегом все покрыло:   И деревья и дома,   Свищет ветер легкокрылый:   «Здравствуй, зимушка-зима!»   </div>  </div>

Код css:

.container {   display:inline-block;    position:relative;  }  .container div {    display: inline-block;    position: absolute;    bottom: 10px; left: 0px;    background-color: rgba(0,0,0,.4);    padding: 5px 5px 5px 10px;   color: white  }

container:

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

container div:

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

Показываем описание при наведении на картинку

Показанный выше способ можно использовать для отображение текста при наведении картинку мышкой (может пригодиться для описания товаров в интернет-магазине).

Код css будет выглядеть следующим образом (код html не изменился):

.container {   display:inline-block;    position:relative;  }  .container div {    display: none;   position: absolute;    bottom: 10px; left: 0px;    background-color: rgba(0,0,0,.4);    padding: 5px 5px 5px 10px;   color: white  }  .container:hover div {   display: block   }  

itzx.ru

Каждый день на форумах 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;	  }

borpost.ru

position: absolute и position:relative

<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: absolute с другими элементами

<style type="text/css">   .temnyi {position: relative;}   .svetlyi1 {}   .svetlyi2 {} </style>  <div class="temnyi">  <div class="svetlyi1">А</div>  <div class="svetlyi2">Б</div> </div>

<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>

<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>

<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

<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>

<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>

<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>

<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>

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

<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>

shpargalkablog.ru

CommentsAngelRadiant78u   |  Понедельник, 13 Февраль 2017 at 01:50

http://www.adaffix.pl/2016/04
Purchasing a used or new auto can be quite a challenging method if you do not know what you are doing. By educating yourself about automobile store shopping before you decide to head to the car dealership, you may make stuff simpler yourself. The following advice can help your next store shopping trip be more enjoyable.

Always deliver a mechanic coupled when searching for a brand new vehicle. Car dealers are notorious for promoting lemons and you may not want to be their next sufferer. When you can not get a auto mechanic to check out automobiles along, at the very least be sure that you have him review your final choice before buying it.

Know your restrictions. Before you start shopping for your upcoming automobile or vehicle, choose how much you can manage to pay out, and stay with it. Don’t forget about to add interest in your computations. You will probably shell out around 20 percent as a down payment too, so be well prepared.

Well before going to a car dealership, know what sort of automobile you desire. Analysis all of you options before buying to help you decide what works the best for your financial allowance and family members demands. Do your research to learn exactly how much you should be paying to get a potential auto.

Before signing any contract make time to go through every line, including the fine print. If there is anything at all detailed you do not recognize, usually do not signal until you purchase an solution that you just comprehend. Unsavory salesmen can make use of an agreement to place numerous charges that have been not mentioned.

When you keep the previous advice in mind next time that you simply go shopping for a auto, you will be very likely to get a good deal. Investing in a auto does not have to be a headache. Use the information out of this write-up and you may have the auto you desire in a excellent value.

www.sevelweb.ru

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

Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.

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

Css текст на картинке

Схема документа

Css текст на картинке

HTML-разметка

  <div class="image">  	<img src="image1.jpg" alt="" />  	<h2>A Movie in the Park:<br />Kung Fu Panda</h2>  </div>

Конечно, было бы легче использовать div-элемент для вывода изображения в качестве фонового рисунка, но в данном случае я предполагаю, что изображение — это контент документа, и, следовательно, оно принадлежит HTML. Элемент div будем использовать в качестве контейнера для абсолютного позиционирования текста в нём.

CSS

  .image {  	position	: relative;  	width		: 100%; /* for IE 6 */  }    h2 {  	position	: absolute;  	top		: 200px;  	left		: 0;  	width		: 100%;  }

Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент <h2> является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом <span>. Обернём в него текст внутри заголовка.

  <h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

Будем использовать этот span для оформления текста и фона:

  h2 span {  	color			: white;  	font			: bold 24px/45px Helvetica, Sans-Serif;  	letter-spacing		: -1px;  	background		: rgb(0, 0, 0); /* на случай, если следующая строка не сработает */  	background		: rgba(0, 0, 0, 0.7);  	padding			: 10px;  }

Проблемы

Css текст на картинке

Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега <br />, в этом случае мы уже сможем воспользоваться padding-ом.

  <h2>  	<span>A Movie in the Park:  		<span class="spacer"></span>  		<br />  		<span class="spacer"></span>  		Kung Fu Panda  	</span>  </h2>

Этим новым span-ам мы зададим свойство padding:

  h2 span.spacer {  	padding	: 0 5px;  }

Что на счёт семантики?

На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:

  <h2>  	A Movie in the Park:<br />Kung Fu Panda  </h2>
  $(function() {  	$("h2").wrapInner("<span>");  	$("h2 br").before("<span class='spacer'>")  		.after("<span class='spacer'>");  });  

Пример

www.css-tricks.ru

В начальной стадии изучения языков HTML, CSS и пр. появляются (как это и должно быть) вопросы: как сделать так, или вот, так и в нашем вопросе, как написать текст поверху изображения. Вполне естественное проявление интереса, и требует закрепление знаний в этой области. Но для выполнения этой задачи вы уже должны знать хоть малую часть CSS чтобы понимать базовые свойства каскадной таблицы.

На самом деле выполнить написания текста поверх картинки не столь трудно. Практически делается за счет свойства position и его атрибутов, а дальше идет оформление самого текста. Можно попробовать сделать по-другому, к примеру, задать блоку div фон при этом использовать ту картинку, на которой должен быть расположен текст.

Но такой способ ограничивает возможности и само применение текста поверх картинки. Поэтому лучшим вариантом будет воспользоваться свойством position. Данный элемент дает большие преимущества и полную свободу движения в указанной области эта область обозначается свойством position: relative;. А иначе позиционирование будет происходить по отношению к браузеру.

Рассмотрим на первом примере.

HTML

 <div class='imgblock'>  <img src='egipet.jpg' title='Семь чудес света'>  <span>Пирамиды Египта</span>  </div>

CSS

 .imgblock {  position: relative;  display: inline-block;  }  .imgblock img {  height: 160px;  width: 250px;  }  .imgblock span {  /*background: rgba(0,0,0,0.7); (полупрозрачность)*/  background: #222;  color: #fff;  border-radius: 2px;  position: absolute;  right: 0;  bottom: 10px;  font-size: 18px;  padding: 3px 5px;  }

 

Результат.

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

Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.

Далее, форматируем div в линейно – блочный элемент display: inline-block;

И последнее на что стоит обратить внимание — это position: absolute; элементу <span>.

Остальные стили идут как оформление текста.

Во втором примере используем более длинную надпись на картинке и стилизуем ее должным образом.

HTML

 <div class='imgblock2'>  <img src='sad.jpg' title='Семь чудес света'>  <h2><span>Семь чудес света <br /> Висячие сады Семирамиды</span></h2>  </div>

CSS

 .imgblock2 {  position: relative;  display: inline-block;  }  .imgblock2 img {  height: 160px;  width: 250px;  }  .imgblock2 h2 {  left: 0;  position: absolute;  top: 10px;  width: 100%;  left: 5px;  }  .imgblock2 h2 span {  background: #222;  border-radius: 2px;  color: #fff;  font: 16px arial;  line-height: 29px;  padding: 3px 5px;  }

 

Результат.

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

Ну вот незадача, мы использовали тег <br /> — перенос строки и в итоги получили разрыв между пробелами. Это видно в примере где текст плотно прилегает краям и на вид получаетесь не очень красиво.

Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел &nbsp что позволит нарастить промежуток.

HTML

 <div class='imgblock2'>  <img src='sad.jpg' title='Семь чудес света'>  <h2><span>Семь чудес света &nbsp<br />&nbsp Висячие сады Семирамиды</span></h2>  </div>

CSS

 .imgblock2 {  position: relative;  display: inline-block;  margin: 100px;  }  .imgblock2 img {  height: 160px;  width: 250px;  }  .imgblock2 h2 {  left: 0;  position: absolute;  top: 10px;  width: 100%;  left: 5px;  }  .imgblock2 h2 span {  background: none repeat scroll 0 0 #222;  border-radius: 2px;  color: #fff;  font: 16px arial;  line-height: 29px;  padding: 3px 5px;  }

 

Результат.

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

Во втором способе применим тег <b>…</b> он как <strong> только жирность поменьше, но мы ее совсем уберем.

 

HTML

 <div class="imgblock3">  <img src='sad.jpg' title='Семь чудес света'>  <span>  <b>Семь чудес света</b>  <b>Висячие сады Семирамиды</b>  </span>  </div>

CSS

 .imgblock3 {  position: relative;  display: inline-block;  }  .imgblock3 img {  height: 200px;  width: 300px;  }  .imgblock3 span {  left: 10px;  position: absolute;  top: 10px;  width: 100%;  }  .imgblock3 span b {  background: #222;  color: #fff;  font: 16px/34px arial;  padding: 6px 10px;  white-space: nowrap;  border-radius: 3px;  }

 

Результат.

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

В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.

 

Источник

vavik96.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector