Сначала давайте поговорим о том, что такое RGBA. RGB (что означает Red, Green, Blue — красный, зеленый, синий) — цветовая модель, позволяющая задавать цвет с помощью численных значений трех составляющих. Комбинируя их, можно получить множество различных оттенков.
Содержание статьи
На рисунке ниже показана палитра цветов Photoshop. Обратите внимание, что выбранный нами голубой цвет может обозначаться несколькими способами, включая знакомую шестнадцатеричную запись, которую мы бы использовали в CSS.
body {
background: #3792b3;
}
Можно задать тот же цвет в RGB, используя три десятичных значения (для красного, зеленого и синего).
body {
background: rgb(55,146,179);
}
В обоих случаях получается один и тот же оттенок, но используется разный синтаксис.
RGBA расшифровывается как Red Green Blue Alpha. На W3C объясняется: «В этой спецификации цветовая модель RGB расширена и включает составляющую альфа, позволяющую задать непрозрачность цвета» Это значит, что можно добавить четвертое значение (от 1 до 0), чтобы задать уровень непрозрачности данного RGB-цвета. Для полной непрозрачности используется значение 1, для полной прозрачности — 0.
Например, мы можем сделать наш голубой цвет полупрозрачным, добавив .5 в качестве четвертого значения после значений RGB.
body {
background: rgba (55, 146, 179, .5);
}
Для одного и того же значения RGB можно добиться разной степени непрозрачности: 1 задает непрозрачность 100%, .75 дает тот же цвет, но с непрозрачностью 75%, .5 означает 50% и т. д.
Возможность задавать прозрачность цвета легко и быстро прямо в таблице стилей — это прекрасно. Но как насчет собственно свойства opacity и чем оно отличается от RGBA?
В CSS3 можно добавлять прозрачность с помощью свойства opacity. Просто задайте значение от 1 до 0, чтобы определить степень прозрачности любого элемента. Например, если вы хотите добиться непрозрачности 65% для всех абзацев на странице, можно написать такой код.
p {
opacity: .65;
}
Значительная разница между opacity и RGBA заключается в том, что opacity задает прозрачность элемента и всего, что в нем содержится, тогда как RGBA задает прозрачность только фона или цвета элемента.
RGBA — необычайно гибкое средство, позволяющее задавать прозрачность цвета с помощью одной простой строки кода. Возможность управлять элементами дизайна через таблицы стилей вместо того, чтобы редактировать изображения, не только облегчает жизнь, но и позволяет работать быстрее и эффективнее — браузер берет на себя всю тяжелую работу. И, опять же, это перспективное направление в CSS, поэтому мы можем уже сейчас начать экспериментировать с новыми возможностями в браузерах, поддерживающих продвинутые стили (такие как RGBA).
К счастью, использование синтаксиса цветовой модели RGBA безопасно для браузеров, которые ее не поддерживают. Например, Internet Explorer просто проигнорирует такое правило.
Сейчас мы лишь поверхностно изучили возможности RGBA. Возможность задавать непрозрачность одновременно с цветом — гибкий и мощный инструмент, а RGBA — всего лишь один из способов добиться этого. Модель RGBA также позволяет сделать все быстро и легко, и за это мы ее любим.
