Как сделать текст поверх картинки на странице сайта?

Серега - Суббота, 9 Ноябрь 2013 09:19

Не так давно ко мне обратился друг и попросил сделать для него сайт.  Конечно же,  я согласился ему помочь, ведь друзьям отказывать в помощи нельзя.
Тематика сайта связана с его профессиональной деятельностью, особых пожеланий на видение сайта у моего друга не было, для него самое главное, что бы был сайт, а какой он будет это дело пятой. Но я так не считал!
Для сайта я сделал логотип, написал тексты, сделал карты место нахождения фирмы и т.д и т.п., затем показал сайт другу и у него тут же возникла мысль,  а нельзя ли разместить текст по верх картинки на странице сайта? Спросил он у меня. Я задумался над этим и за ответом полез в интернет. Много было предложено решений, как сделать текст поверх картинки, это и  картинка за текстом с помощью плагина, картинка с текстом  HTML, и css  текст поверх картинки.  Просмотрев множество вариантов того как вставить текст поверх картинки, нашел для себя пару очень  простых способ, которыми хочу поделиться с вами.

И так для того что бы разместить текст поверх картинки  используем html и css код.

Вставляем один из вариантов CSS кода в самый низ файла стиля вашего шаблона «style. CSS».

Вариант № 1 (его работу вы видите в самом начале текста):

.overimg {
    width:700px;
    height: 300px; /*РАЗМЕРЫ КАРТИНКИ И ОБЛАСТИ ТЕКСТА*/
    position: relative;
    border: 1px solid silver; /*При необходимости*/
}

.overimg p {
    width: 100%;
    position: absolute;
    right: 5px;
    bottom: 5px;
}

Для вывода картинки в html форме текстового редактора в начале записи вставляем код:

 <div class="overimg">
 <img src="АДРЕС ВАШЕЙ КАРТИНКИ" alt="" />

<p>Заключаете текст в теги(p, span, и т.д.), и позиционируете их абсолютно!</p>
</div>

Для того чтобы картинку отобразить по центру, по левому или по правому краю страницы,  нужно в строку <div class=«overimg»> добавить align=«center» (или left или right)? в итоге получается вот такая строчка <div class=«overimg» align=«center»>.

Вариант № 2:

#TextOverImage {
padding:0px;
width:680px; 
height:506px; 
background-image:url(/images/stories/kartinka2.png);
background-repeat:no-repeat;
color:#0d3a51;
}

В этом коде функция background-image:url(/images/stories/kartinka2.png); — отвечает за вывод картинки, здесь вам потребуется прописать свой адрес места расположения картинки, которую вы хотите разместить за текстом.

Для того, что бы картинка не повторялась несколько раз на странице используем функцию background-repeat:no-repeat;

Для вывода картинки за текстом,  переключаем текстовый редактор из визуального режима в текстовый  (или html) и в самом начале записи вставляем вот такой код:

 <div id="TextOverImage">

 

Пример на скриншоте: Картинка 2

P.s. Таким образом, не прибегая к плагинам и не увеличивая скорость загрузки страницы, делаем сайт еще красивее и необычные.


 


Комментарии (3)

  1. CommentsTraveler   |  Четверг, 14 Ноябрь 2013 at 19:55

    Спасибо. Хорошие способы, чтобы без плагинов текст сделать поверх картинки. Пользуясь этими рекомендациями для многих вполне реально реализовать задуманное. Но многие вебмастера отлынивают от того, чтобы ковыряться в коде. Скорее всего, каждому вебмастеру нужно научиться на более-менее нормальном уровне всё-же разбираться в коде и понимать его. Ведь это иногда просто необходимо, да и просто интересно. Ну а кто считает себя инфобизнесменом, тот пусть делегирует полномочия фрилансерам.

  2. CommentsСерега   |  Пятница, 15 Ноябрь 2013 at 09:30

    Traveler — абсолютно точно подмечено, что каждому веб мастеру нужно уметь разбираться в коде, так как это очень помогает в сайтостроении. Необязательно знать код на наизусть, нужно просто понимать, что за что отвечает и тогда все задуманное получиться. Опять же использование разных кодов в шаблоне сайта или на страницах приводить к уникализации сайта, что в свою очередь положительно влияет на поисковую выдачу.

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

Оставить комментарий






Подписаться

Рекомендую