Как сделать текст на прозрачном фоне
Добрый вечер друзья. Хочу Вам напомнить, что ранее мы с Вами изучали свойство opacity, при помощи которого задавали прозрачность для элементов. Но для этого свойства, у нас не получится реализовать, например, такую задачу: сделать текст на прозрачном фоне. В качестве примера в сегодняшнем уроке мы реализуем данную задачу. Для решения такой задачи нам понадобится css свойство background. Оно предусматривает возможность задавать цвет фона в формате RGB, а также rgba. Если вы не знаете, то, r - отвечает за красную составляющую, g - зеленую, b - синюю. И a отвечает за alpha канал, при помощи которого можно установить прозрачность. Т.е., нам будет вполне достаточно указать данные значения, и мы реализуем нашу задачу. Давайте приступим к примеру.
<html>
<head>
<title>Полупрозрачный фон с текстом</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="block">
<p>Текст с прозрачным фоном</p>
</div>
</body>
</html>
Осталось написать несколько строк css стилей и все будет готово.
.block {
background: rgba(100, 50, 70, 0.1);
height: 100px;
width: 250px;
}
.block p {
text-align: center;
}
Все, реализация нашей задачи завершена. Как видите, мы создали блок, поместив в него абзац с текстом.
При помощи стилей установили для него фиксированную ширину и высоту, выровняли текст по центру блока и задали
свойство background, в котором указали альфа канал, и благодаря этому текст остался непрозрачным, в отличие от того,
если бы мы использовали свойство opacity для нашего блока.
Вот такой, довольно короткий у нас получился урок,
но мы с Вами реализовали довольно популярную задачу. На этом я с Вами прощаюсь, до встречи.
