Головна - CSS - Як зробити текст на прозорому тлі
Добрий вечір друзі. Хочу Вам нагадати, що раніше ми з Вами вивчали властивість opacity. за допомогою якого задавали прозорість для елементів. Але для цього властивості, у нас не вийде реалізувати, наприклад, таку задачу: зробити текст на прозорому тлі. Як приклад в сьогоднішньому уроці ми реалізуємо це завдання. Для вирішення такого завдання нам знадобиться css властивість background. Воно передбачає можливість задавати колір фону в форматі RGB. а також rgba. Якщо ви не знаєте, то, r - відповідає за червону складову, g - зелену, b - синю. І a відповідає за alpha канал. за допомогою якого можна встановити прозорість. Тобто нам буде цілком достатньо вказати дані значення, і ми реалізуємо нашу задачу. Давайте приступимо до прикладу.
Текст з прозорим фоном
Залишилося написати кілька рядків css стилів і все буде готово.
block <
background. rgba (100, 50, 70, 0.1);
height. 100px;
width. 250px;
>
Все, реалізація нашої задачі завершена. Як бачите, ми створили блок, помістивши в нього абзац з текстом.
За допомогою стилів встановили для нього фіксовану ширину і висоту, вирівняли текст по центру блоку і задали властивість background. в якому вказали альфа канал, і завдяки цьому текст залишився непрозорим, на відміну від того, якби ми використовували властивість opacity для нашого блоку.
Ось такий, досить короткий у нас вийшов урок, але ми з Вами реалізували досить популярну завдання. На цьому я з Вами прощаюся, до зустрічі.
5 останніх свіжих статей:
Здрастуйте дорогі друзі, сьогодні ми з Вами вивчимо ще одну тему присвячену мови CSS. І навчимося реалізовувати підказки на CSS.
Сьогодні ми розглянемо ще одну можливість, яку надає нам CSS3, а саме поговоримо про псевдоклас target. для чого він нам може бути потрібен, і розглянемо один з найпопулярніших способів його застосування.
