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. Ура, товарищи!

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

  1. О как замечательно что на ткнулся на эту запись, а то js собирался мучать.
    После нашёл ещё возможность и в таком виде:

    background: hsla(207, 38%, 47%, .4);
  2. СПАСИБО АВТОР!!! Как я долго над этим еб%@ся пока не нашёл эту статью) Ещё раз Спасибо!!!!!!!!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *