функция rgb() в CSS
- Предыдущая страница Функция CSS repeating-radial-gradient()
- Следующая страница Функция CSS rotate()
- Вернуться на один уровень вверх Референсное руководство по функциям CSS
определение и использование
CSS rgb() функцию указывают цвет с использованием модели цвета красный-зеленый-синий (RGB). Также можно добавить опциональный канал прозрачности (который показывает прозрачность цвета).
Цветовые значения RGB через rgb(красный зеленый голубой) Указание. Каждый параметр определяет интенсивность цвета, может быть целым числом от 0 до 255 или процентным значением от 0% до 100%.
Например, значение rgb(0 0 255)呈蓝色，потому что параметр синего установлен на максимальное значение (255), а другие параметры установлены в 0.
Примечание:rgba() Функция является rgb() Альтернативное имя функции. Рекомендуется использовать rgb() Функция.
Пример
Определите различные цвета RGB(A):
#p1 {background-color:rgb(255 0 0);} /* Красный */
#p2 {background-color:rgb(0 255 0);} /* Зелёный */
#p3 {background-color:rgb(0 0 255);} /* Синий */
#p4 {background-color:rgb(192 192 192);} /* Серый */
#p5 {background-color:rgb(255 255 0);} /* Жёлтый */
#p6 {background-color:rgb(255 0 255);} /* Клюквенный красный */
#p7 {background-color:rgb(255 0 255 / 0.2);} /* Клюквенный красный с прозрачностью */
#p8 {background-color:rgb(0 0 255 / 50%);} /* Синий с прозрачностью */
Синтаксис CSS
Синтаксис абсолютных значений
rgb(R G B / A)
| Значение | Описание |
|---|---|
| R |
Обязателен. Определяет интенсивность красного цвета, может быть целым числом от 0 до 255 или процентом от 0% до 100%. Можно также использовать none (эквивалентно 0%). |
| G |
Обязателен. Определяет интенсивность зеленого цвета, может быть целым числом от 0 до 255 или процентом от 0% до 100%. Можно также использовать none (эквивалентно 0%). |
| B |
Обязателен. Определяет интенсивность синего цвета, может быть целым числом от 0 до 255 или процентом от 0% до 100%. Можно также использовать none (эквивалентно 0%). |
| / A |
Опционально. Значение канала прозрачности цвета, 0% (или 0) означает полную прозрачность, 100% (или 1) означает полную непрозрачность. Можно также использовать none (что означает канал прозрачности без значений). Значением по умолчанию является 100%. |
Синтаксис относительных значений
rgb(from color R G B / A)
| Значение | Описание |
|---|---|
| from color |
Начинается с ключевого слова from, за которым следует значение исходного цвета. Это исходный цвет, на котором основан относительный цвет. |
| R |
Обязателен. Определяет интенсивность красного цвета, может быть целым числом от 0 до 255 или процентом от 0% до 100%. Можно также использовать none (эквивалентно 0%). |
| G |
Обязателен. Определяет интенсивность зеленого цвета, может быть целым числом от 0 до 255 или процентом от 0% до 100%. Можно также использовать none (эквивалентно 0%). |
| B |
Обязателен. Определяет интенсивность синего цвета, может быть целым числом от 0 до 255 или процентом от 0% до 100%. Можно также использовать none (эквивалентно 0%). |
| / A |
Опционально. Значение канала прозрачности цвета, 0% (или 0) означает полную прозрачность, 100% (или 1) означает полную непрозрачность. Можно также использовать none (что означает канал прозрачности без значений). Значением по умолчанию является 100%. |
Технические детали
| Версия: | CSS2 |
|---|
Поддержка браузеров
Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| rgb() | ||||
| 1 | 4 | 1 | 1 | 3.5 |
| rgb() с параметром прозрачности | ||||
| 65 | 79 | 52 | 12.1 | 52 |
| Пробелы отделяют параметры | ||||
| 65 | 79 | 52 | 12.1 | 52 |
- Предыдущая страница Функция CSS repeating-radial-gradient()
- Следующая страница Функция CSS rotate()
- Вернуться на один уровень вверх Референсное руководство по функциям CSS
