События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

Самые жестокие люди в истории мира


Самые глубокие места в мире


Часовая башня выборга. Белая башня.


Подборка грустных картинок, мемы, тлён, грусть. Жизнь-тлен.


правильно или неправильно вы живёте?


Загадочные места Петербурга. Кировский район. Мистика и тайны.


Что означает герб. Двуглавый орел. Расшифровка герба и история появления.


Как побороть зависимость и стать свободным?


Интересные, секретные фотографии. подборка (фото)


Самые глубокие места в мире


Все дороги ведут в Рим. Невский трезубец. Или "масоны" в Петербурге.



“Не может быть свободен народ, угнетающий другие народы. Сила, нужная ему для подавления другого народа, в конце концов всегда обращается против него самого.”

Фридрих Энгельс

Следующая цитата »

Это факт!


Радуга-дуга на самом деле вовсе не дуга, а окружность. Однако наблюдать радугу целиком возможно только с борта самолета.

Следующий факт »

Ра оставил тебе послание!... (0о0)

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


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

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

У вас должно получиться так:
Snow
снизу слева
сверху слева
сверху справа
снизу справа
текст по середине

код 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 - это обязательный класс, без которого ничего не будет работать.




ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

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



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)