Открыть меню    

RGBa в CSS, поддержка браузерами, примеры использования

RGBa – это способ задать цвет в CSS с поддержкой альфапрозрачности.

CSS

    div {
   background: rgba(200, 54, 54, 0.5); 
}

RGBa в CSS Это позволяет нам задать цвет с полупрозрачным фоном; три первые цифры – это значения RGB, характеризующие долю каждой цветовой составляющей, четвертое значение – это альфапрозрачность (от 0 – полностью прозрачным, до 1 – полностью непрозрачным). В CSS существует похожее свойство opacity, но свойство opacity влияет также на все элементы-потомки, делая их также полупрозрачными, что нас не может устраивать (конечно, существуют всевозможные хаки) и к тому же свойство opacity немного “неряшливо” в плане кроссбраузерности.

При помощи RGB мы можем сделать блок полупрозрачным, не затрагивая потомков блока:

пример использования rgba в CSS

Объявляем RGBa цвет в CSS

Не все браузеры поддерживают RGBa (хотя сейчас это неактуально, так как в данном случае речь идет о совсем уж старых браузерах), таким образом, вы должны позаботиться о «резервном» цвете. Этот цвет должен быть твердым (полностью непрозрачным). Пример:

CSS

    div {
   background: rgb(200, 54, 54); /* резерв  */
   background: rgba(200, 54, 54, 0.5); 
}

Поддержка браузерами RGBa

Поддержка браузерами RGBa

RGBa и IE

Браузер IE8 и ниже не поддерживают RGBa, хотя эти браузеры уже можно не учитывать при верстке сайта, но, вероятно, вам может пригодиться существующее решение для этих браузеров. Итак, для достижения тех же результатов, что и в современных браузерах, в условные комментарии нужно вставить фильтр от Microsoft:

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

        </style>

<![endif]-->

Первые две цифры в начале и в конце цветовых значений отвечают за альфанепрозрачность. В фильтре используется шестнадцатеричная система и полностью непрозрачному цвету соответствует код FF (в десятичной это 255). Следовательно, шестнадцатеричное 80 — это десятичное 128, т.е 50% прозрачности.

Примеры использования

пример использования rgba

использованы материалы

Комментарии к статье

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