Властивість CSS RGBa дозволяє задати фоновий колір з альфа-каналом (читай, заливати блоки напівпрозорим кольором).
Зрозуміло, в CSS є властивість opacity. однак основний його недолік: всі дочірні елементи всередині прозорого блоку будуть також успадковувати його прозорість.
приклад:
На макеті посилання в навігації мають напівпрозорий фон.
Поширені підходи:
- Заливаємо фон елемента 1-піксельним PNG24, фікс прозорість в IE6
- Фон робимо прозорим через css opacity. Текст позиціонуємо окремо вже в іншому елементі
- Ще більш цікаві танці з бубном
За допомогою RGBa рішення виглядає наступним чином:
Припустимо, потрібен синій фон з прозорістю 50%
element # 123;
background. rgb # 40; 0. 0. 255 # 41; ; / * Для тих, хто не підтримує дане властивість буде суцільний фоновий колір * /
background. rgba # 40; 0. 0. 255. 0.5 # 41; ;
# 125;
А не підтримувати його будуть IE6-8, Opera 9.x, Mozilla Firefox 2.x
Для IE можна постаратися і зробити більш витончено:
Примітка
Колір в фільтрі задається 8 числами. Перші 2 числа це ступінь прозорості: FF - повністю непрозорий, 00 - прозорий. Наступні 6 чисел звичне позначення HTML-кольору.
Використання RGBa не обмежується тільки фоновим кольором у блоків, наприклад, цією властивістю можна імітувати тіні або робити напівпрозорі бордери, все залежить від вашої фантазії.
upd. У IE9 є підтримка RGBA, HSLA. УРА товариші!
Про як чудово що на ткнувся на цю запис, а то js збирався мучити.
Після знайшов ще можливість і в такому вигляді: