Прозрачность элементов CSS

В CSS есть три способа изменить прозрачность элемента:
с помощью свойства opacity,
с помощью функции rgba(),
с помощью функции hsla().

1. Свойство opacity

Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity, содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:

Some text

h1 {color: #CD6829;}
div {
background: #CDD6DB;
opacity: .3;
}
opacity
Рис. 1. Прозрачность элементов с помощью opacity

2. Функция rgba()

Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red), зеленого (Green) и синего (Blue) цветов, а альфа-канал (Alpha) отвечает за степень прозрачности цвета. В отличие от свойства opacity, для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

R4mXe
Рис. 2. Цветовая модель RGB
h1 {color: #CD6829;}
div {background: rgba(205, 214, 219, 0.3);}
rgba
Рис. 3. Прозрачность элементов с помощью функции rgba()

3. Функция hsla()

Функция hsla(), параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha), также позволяет задать полупрозрачный цвет.

Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:

0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет.

Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1). Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1), а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1).

color-circle
Рис. 4. Цветовая модель HSL

Удобный конвертер цветов вы найдете здесь.

  • Freeman4D

    Здравствуйте, Елена!

    Сегодня хочу поднять тему бага свойства opacity, применяемого к эмодзи.
    Как выяснилось, оно приподнимает символ и обрезает его сверху!
    https://codepen.io/Freeman4C/pen/bYBboz

    Известно ли Вам такое непотребство и сообщалось ли о нём где-нить?!

    Можно ли обойти эту бяку остальными двумя методами управления прозрачностью?
    Заранее спасибо!

    • Здравствуйте! Можете приложить картинку? В редакторе я не вижу никакой проблемы…

      • Freeman4D

        https://uploads.disquscdn.com/images/2026a15b67f95d2c907292dccaead2cb65d8d2b20a3495955c0a3efaee7608a4.jpg Спасибо, Елена, за идею… посмотреть в других OS!
        Глюк проявляется в моей версии iOS 8.3 во всех имеющихся у меня браузерах.
        В доступной, по случаю, 10.3 глюк уже устранили.
        Это радует…
        Сорри за беспокойство.
        Картинку глюка прилагаю — 2-я и 3-я строки.

        • Спасибо, вижу, странная ошибка.

          • Freeman4D

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