CSS RGBa или как бы еще задать прозрачность фона элемента

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (читай, заливать блоки полупрозрачным цветом).
Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Пример:

На макете ссылки в навигации имеют полупрозрачный фон.

Распространенные подходы:

  1. Заливаем фон элемента 1-пиксельным PNG24, фиксим прозрачность в IE6
  2. Фон делаем прозрачным через css opacity. Текст позиционируем отдельно уже в другом элементе
  3. Еще более интересные танцы с бубном

С помощью RGBa решение выглядит следующим образом:

Допустим, нужен синий фон с прозрачностью 50%

.element{
background: rgb(0, 0, 255); /* Для тех, кто не поддерживает данное свойство будет сплошной фоновый цвет*/
background: rgba(0, 0, 255, 0.5);
}

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x
Для IE можно постараться и сделать более изящно:

<!--[if IE]>
<style type="text/css">
.element{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#990000ff,endColorstr=#990000ff);
zoom: 1;
}
<! [endif]-->

Примечание
Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков, например, этим свойством можно имитировать тени или делать полупрозрачные бордеры, все зависит от вашей фантазии.

upd. В IE9 имеется поддержка RGBA, HSLA. Ура, товарищи!