×

Вокруг мира турцияПетербург и окрестностифакты и миртунисПоследние новостиТайны историиКрымпро сссрСтрашное и мистическоеВыборгОбщество, мир
Интересно Мистика и Гаданияуроки по 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
Национальный оркестр Монако больше, чем его армия.

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






Проблема с кодировкой текста в html, php, js, mysql. РЕШЕНИЕ.
как сделать картинку рядом текстом, в одном блоке. html, css
Общество, мир про ссср Крым тунис факты и мир Петербург и окрестности Последние новости турция Страшное и мистическое Тайны истории Выборг






×

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