Еще одним дополнением в новой спецификации CSS3, является введение новой цветовой модели rgba. Она позволяет одновременно задавать цвет и прозрачность. Как вам уже должно быть известно, все цвета строятся из трех основных: красного, зеленого, синего. Если расшифровать аббревиатуру rgb, получится red, green, blue.
Ранее, мы задавали цвет текста или фона с помощью 16-ричного кода, и использовали от 3 до 6 цифр и (или) букв. В палитре RGB цвет задается только цифрами, и максимум их может быть 9. Очень хорошо отличия можно изучить в палитре PhotoShop.
Светло-красным выделена область определения цвета в rgb, светло-синий – 16-ричный код.
Но чем же эта палитра лучше 16-ричной? Плюсы, несомненно, в том, что вместе с цветом, можно задавать и его интенсивность, или другими словами – прозрачность. Но, чтобы задать прозрачность, вместо rgb нужно писать rgba (a – alpha). Ранее, прозрачность того или элемента задавалась с помощью отдельного свойства opacity. В принципе, отличий свойства opacity от alpha практически нет, разве что задается отдельно. А значения они принимают одинаковые – десятичными числами. 1 – 100% прозрачность, 0,75 – 75%ная прозрачность и далее по аналогии.
Теперь поговорим о синтаксисе. Как было выше сказано, задается цвет с помощью девяти цифр. Попробуем задать цвет фона страницы.
body {
background: rgb (171, 171, 171);
}
Цвет будет светло-серый. А теперь к этому цвету добавим 50% прозрачность.
body {
background: rgba (171, 171, 171, 0.5 );
}
Вот видите, к слову rgb добавилась буква, а к трем блокам цифр добавился еще один с прозрачностью.
Благодарю за инфо http://soveton.ru/web-dizajn/