×

Вокруг мира тунисКрымТайны историифакты и миртурцияВыборгпро сссрСтрашное и мистическоеОбщество, мирПетербург и окрестности
Интересно Мистика и Гаданияуроки по html,css,js,phpАнекдотыМузыка
Исскуство и поэзия Стихи Серебренного векаСтихи Золотого векаБасниПритчиМифы и Легенды древнего мираЯпонские стихи и проза
Разные эпохи Тайны историиДревняя Азияпро сссрСказки народов мираСредневековье
Разное Комедия "Дино и его друзья"ОригамиСтрашное и мистическоеРаскраскиКонвертеры
общество и мир ПсихологияОбщество, мирфакты и мирАфоризмы и цитаты

-----------

Вашему сайту нужна помощь? Политика конфидициальности Разместить рекламу

Как написать текст на картинке, с помощью CSS + html?


html, css, картинка, текст на картинке, текст на, написать текст, поверх, сверху, изображении, изображение, на блоке, текст на картинке, текст на изображении, текст на фотографии, написать, как, текст на блоке, див, div, image, text on image, позицинитровать, сверху, разместить, позиция,  на фото,

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

У вас должно получиться так:
Как написать текст на картинке, с помощью CSS + html?
снизу слева
сверху слева
сверху справа
снизу справа
текст по середине

код html

<div class="container">
<img src="imgdf/story/chg.jpg" alt="Snow" style="width:100%;">
<div class="bottom-left">снизу слева</div>
<div class="top-left">сверху слева</div>
<div class="top-right">сверху справа</div>
<div class="bottom-right">снизу справа</div>
<div class="centered">текст по центру</div>
</div>


и сам код на css.

/* блок с текстом и картинкой*/
.container {
position: relative;
text-align: center;
color: white;
}

/* текст снизу слева */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}

/* текст сверху, слева*/
.top-left {
position: absolute;
top: 8px;
left: 16px;
}

/* текст справа сверху */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}

/* текст снизу справа */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}

/* текст по середине */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


Как видите, в примере использован код для 5 разных положений текста. Можете скопировать нужное для себя и удалить весь ненужный код. CONTAINER - это обязательный класс, без которого ничего не будет работать.


Комментарии

Комментариев пока нет. Оставь тут свой комментарий или анекдот!


Комментарии к посту






Русской душе глубоко свойственна религиозная мука о противоречиях жизни и мира. В этих особенностях заложены как все бесконечные возможности религиозного восхождения русской души, так и страшные возможности ее срыва в преисподнюю небытия.

Федор Степун


Norway
Во влажных тропических индонезийских лесах произрастает дерево кеппел, его плоды настолько ароматные, что пот человека, попробовавшего их на вкус, приобретает запах душистой фиалки.

[ Интересные факты о мире ]






Как разместить несколько блоков css? (разные варианты)
Как вставить таблицу на сайт. Варианты таблиц. html, css.
факты и мир про ссср Крым Выборг Страшное и мистическое тунис Петербург и окрестности Общество, мир турция Тайны истории






×

Рассказы из категории: Создание сайта (html,css,php,js)