Текст върху изображение с чист CSS

Текст върху изображение с CSS
Добър ден на всички мои приятели, постоянни читатели и гости. С помощта на елементите position: relative и position: absolute лесно можете да наложите текст върху изображение в публикацията си. Няма нужда да прибягвате до използването на онлайн редактори или други програми на трети страни.



    Всичко се прави с помощта на чист CSS. Погледнете по-долу, за да разберете как ще изглеждат изображението и текстът върху него.


    Цветя
    „…Какво му трябва на човека?
    Едно приятелство добро,
    една шишарка на пътека,
    един бял лист, едно перо,

    една случайна песен птича,
    един нелош човешки път…
    Бруррум! – как весело се свлича
    по ламарината снегът!”
    Валери Петров




    Код:



    <div style="position: relative;">
    <img border="0" height="315" src=" Адрес на изображението (URL) " width="460" alt="Цветя"/>
    <div style="font-family: Courier; font-size: 80%; left: 170px; 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>



    Пояснения


    ➤Със син цвят е отбелязано мястото на адреса на изображението и текста върху него, а всичко останало е въпрос на техника;

    ➤left: 150px; и left: 340 px; e разположението на основния текст по отношение на левия край и името на автора;

    ➤С използване на position: absolute; сме задали разположението на текста top: 30px; и името на автора top: 290 px; Прочетете за това тук, защото при използване на кода е вероятно да промените тези стойности на по-големи или по-малки;

    ➤Също така ширината и височината на целия блок е по ваш избор;

    ➤Промяна на цвета на самия шрифт и неговата големина вече може да се направи директно в редактора на публикацията, както при работа с друг текст;

    За редактиране на код използвайте този инструмент.

    Така можете да наложите текст върху изображение. За отбелязване е, че кодът за това е много по-лек в сравнение с този на изображението.
    Доскоро!

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:

    BGtop


    OpenCloseComments
    Cancel