Прозрачность с RGBA

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 28 из 76.

В CSS RGBA-цвета являются расширением RGB-цветов, которые включают альфа-канал для указания непрозрачности цвета. RGBA означает Red (красный), Green (зеленый), Blue (синий) и Alpha (альфа). Параметр альфа — это число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный), позволяющее создавать цвета с различной степенью прозрачности.

Вот базовый синтаксис для использования цветов RGBA в CSS:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Например:

p {
    color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
    background-color: rgba(0, 255, 0, 0.3); /* Полупрозрачный зеленый */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Полупрозрачный синий */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный оверлей */
}

Задание

Легко

Вам дан HTML-документ с заголовком <h3> и абзацем <p>. Ваша задача — использовать свойство background-color с функцией rgba() для стилизации этих элементов с прозрачностью. Выполните следующие шаги:

Напишите CSS-правило для элемента <h3>. Установите цвет фона на синий с помощью rgba(0, 0, 255, 0.5) (50% прозрачности).
Напишите CSS-правило для элемента <p>. Установите цвет фона на зеленый с помощью rgba(0, 128, 0, 0.3) (30% прозрачности).

Шпаргалка

RGBA-цвета расширяют RGB-цвета, добавляя альфа-канал для управления непрозрачностью. Параметр альфа варьируется от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Базовый синтаксис:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Примеры:

p {
    color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
    background-color: rgba(0, 255, 0, 0.3); /* Полупрозрачный зеленый */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный оверлей */
}

Попробуйте сами

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>