Как сделать прозрачный цвет в css
Перейти к содержимому

Как сделать прозрачный цвет в css

  • автор:

Цвета в вебе

Самый простой способ указания цвета в вебе — ключевые слова. Используются английские названия цветов. Самые популярные базовые цвета:

  • Чёрный black
  • Белый white
  • Красный red
  • Зелёный green
  • Синий blue

На самом деле ключевых слов для цветов очень много. Нет особого смысла их все запоминать. Всегда можно заглянуть в таблицу цветов.

Таблица с ключевыми словами для обозначения цвета в CSS

IndianRed LightCoral Salmon DarkSalmon
LightSalmon Crimson Red FireBrick
DarkRed Pink LightPink HotPink
DeepPink MediumVioletRed PaleVioletRed Coral
Tomato OrangeRed DarkOrange Orange
Gold Yellow LightYellow LemonChiffon
LightGoldenrodYellow PapayaWhip Moccasin PeachPuff
PaleGoldenrod Khaki DarkKhaki Lavender
Thistle Plum Violet Orchid
Fuchsia Magenta MediumOrchid MediumPurple
RebeccaPurple BlueViolet DarkViolet DarkOrchid
DarkMagenta Purple Indigo SlateBlue
DarkSlateBlue MediumSlateBlue GreenYellow Chartreuse
LawnGreen Lime LimeGreen PaleGreen
LightGreen MediumSpringGreen SpringGreen MediumSeaGreen
SeaGreen ForestGreen Green DarkGreen
YellowGreen OliveDrab Olive DarkOliveGreen
MediumAquamarine DarkSeaGreen LightSeaGreen DarkCyan
Teal Aqua Cyan LightCyan
PaleTurquoise Aquamarine Turquoise MediumTurquoise
DarkTurquoise CadetBlue SteelBlue LightSteelBlue
PowderBlue LightBlue SkyBlue LightSkyBlue
DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue
RoyalBlue Blue MediumBlue DarkBlue
Navy MidnightBlue Cornsilk BlanchedAlmond
Bisque NavajoWhite Wheat BurlyWood
Tan RosyBrown SandyBrown Goldenrod
DarkGoldenrod Peru Chocolate SaddleBrown
Sienna Brown Maroon White
Snow HoneyDew MintCream Azure
AliceBlue GhostWhite WhiteSmoke SeaShell
Beige OldLace FloralWhite Ivory
AntiqueWhite Linen LavenderBlush MistyRose
Gainsboro LightGray Silver DarkGray
Gray DimGray LightSlateGray SlateGray
DarkSlateGray Black

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .selector  color: black; background-color: AntiqueWhite;> .selector  color: black; background-color: AntiqueWhite; >      

Ключевые слова регистронезависимые — вы можете писать их как угодно и браузер всё равно вас поймёт.

RGB

Скопировать ссылку «RGB» Скопировано

Принцип комбинации красного, зелёного и синего для получения разных цветов

Для задания цвета используется функция rgb ( ) , например, rgb ( 0 63 255 ) для синего. Каждое из трёх значений отвечает за отдельный канал RGB и может быть записано числом от 0 до 255 или в процентах. Для добавления прозрачности, после записи каналов нужно поставить слэш и записать нужное значение от 0 до 1 или в процентах, например rgb ( 0 63 255 / 0 . 5 ) для полупрозрачного синего.

Раньше синтаксис RGB отличался от современного и вы всё ещё можете встретить его в коде или выбрать для лучшей кроссбраузерности, см. Can I use. Для разделения каналов внутри функции нужно было использовать запятые rgb ( 0 , 63 , 255 ) , а для добавления прозрачности — специальную функцию rgba ( ) , которая принимала последним параметром прозрачность цвета, например rgba ( 255 , 0 , 0 , 0 . 5 ) .

HEX

Скопировать ссылку «HEX» Скопировано

Два цвета 2021 года по версии Pantone: серый и жёлтый

Шестнадцатеричный код цвета в цветовой модели RGB, который начинается с # , например, #ff0000 . Сплошные цвета записываются в формате # R R G G B B или в сокращённом # R G B (если символы каждой группы одинаковые). Например #009900 или #090 . Если нужно указать прозрачность, она добавляется в конце в HEX-формате # R R G G B B A A или # R G B A , например #00990055 или #0905 .

Раньше нельзя было задать цвет в нотации # R G B A и приходилось использовать функцию rgba ( ) , но сегодня у этого способа неплохая кроссбраузерность. Проблема одна: мало кто сходу сможет рассчитать 50% в шестнадцатеричном формате, поэтому для указания прозрачности цвета чаще всего используют функцию rgb ( ) , где прозрачность можно задать в дробях или процентах.

Разные способы записи HEX-цветов в качестве значений:

 .selector  color: #FFF; border-color: #00000080; background-color: #ff00ff;> .selector  color: #FFF; border-color: #00000080; background-color: #ff00ff; >      

HSL

Скопировать ссылку «HSL» Скопировано

Параметры в системе HSL

Цветовая модель HSL описывает те же цвета, что и RGB, но иначе: H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness (светлота). Например, hsl ( 120 100 % 50 % ) для зелёного. Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единиц поворота: deg , turn , grad , rad . Доступны значения от 0 до 360, если указываете поворот в градусах. Отрицательные значения не допускаются. Второе и третье значение указываются в процентах. Прозрачность добавляется так же, как в rgb , с помощью слэша со значением, например hsl ( 120 100 % 50 % / 0 . 5 ) полупрозрачный зелёный.

Синтаксис hsl ( ) отличался от современного точно так же, как rgb ( ) : нужны были запятые и специальная функция hsla ( ) для задания прозрачности цвета. Используйте старый синтаксис для лучшей совместимости и не удивляйтесь, если встретите его в коде.

HWB

Скопировать ссылку «HWB» Скопировано

H — hue (оттенок), W — whiteness (количество белого), B — blackness (количество чёрного). Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единиц поворота: deg , turn , grad , rad . Доступны значения от 0 до 360, если указываете поворот в градусах. Второе и третье значения указываются в процентах. Допустимо указывать прозрачность цвета четвёртым параметром через слэш.

Если второй и третий параметры в сумме дают 100%, то они нормализуются до 100% автоматически.

 .item  color: hwb(45 45% 20% / 0.6);> .item  color: hwb(45 45% 20% / 0.6); >      

Ключевые слова

Скопировать ссылку «Ключевые слова» Скопировано

transparent

Скопировать ссылку «transparent» Скопировано

Ключевое слово transparent задаёт прозрачный цвет текста. Технически это равносильно записи любого цвета с нулевой прозрачностью rgb ( 0 0 0 / 0 ) , но бывают случаи, когда просто прозрачность и прозрачность цвета могут работать иначе, например, в градиентах.

current Color

Скопировать ссылку «currentColor» Скопировано

За ключевым словом current Color скрывается цвет, указанный в свойстве color элемента. Очень удобно указывать это слово в качестве значения других свойств, чтобы многократно не указывать один и тот же цвет.

Рассмотрим пример. Пусть цвет рамки элемента будет совпадать с цветом текста:

 .element  color: #6e4aff; border: 1px solid currentColor;> .element  color: #6e4aff; border: 1px solid currentColor; >      

Если мы захотим менять цвет текста и рамки по наведению курсора, то нам достаточно будет изменить значение одного свойства, а цвет рамки подстроится за счёт current Color :

 .element:hover  color: #09ff00;> .element:hover  color: #09ff00; >      

CSS COLORS

Диклеймер: в статье нет ничего про браузеры и поддержку, только теория. Статья представляет собой неполный перевод спецификации c некоторыми дополнениями.

Глоссарий

Факт 1: цвет — это не характеристика излучения, это характеристика реакции человеческого мозга на излучение. То есть два излучения с разным спектром могут иметь один цвет с нашей точки зрения.

Факт 2: далеко не все цвета, которые видит среднестатистический человек, можно воспроизвести аппаратными средствами, в том числе с помощью вашего монитора.

Цветовое пространство — некоторое заданное множество цветов + система координат в нём.
Цветовая система — способ задания цвета в цветовом пространстве.
Цветовой профиль — множество цветов, которые может отобразить монитор.

Тип

Цвета в CSS представлены в виде списка компонентов, также иногда называемых «каналами», представляющих оси в цветовом пространстве. Каждый канал имеет верхнюю и нижнюю границу и может принимать любое значение между ними. Каждый цвет сопровождается альфа-компонентом, указывающим, насколько он прозрачен, и, следовательно, какую часть фона можно увидеть за цветом.

Цвета и доступность

Хотя цвета могут добавить значительную информацию к документам и сделать их более читабельными, сам по себе цвет не должен быть единственным средством передачи важной информации. Авторы должны учитывать рекомендации W3C по доступности веб-контента WCAG20 при использовании цвета в своих документах.

Расчет отображаемых цветов

Большинство современных мониторов располагают пространством sRGB для отображения цвета, реже бывает P3. ActualValue соответствует аппаратным ограничениям, то есть выражено в том цветовом пространстве, которое поддерживается на устройстве.

  • transparent
    ComputedValue и UsedValue — прозрачный черный sRGB.
  • hex , rgb() and rgba() , hsl() and hsla() , hwb() , named colors
    ComputedValue и UsedValue — соответствующий цвет sRGB в паре с указанным альфа-каналом.
  • lab() , lch() и grey()
    ComputedValue и UsedValue — соответствующий цвет CIE Lab в паре с указанным альфа-каналом.
  • device-cmyk()
    ComputedValue и UsedValue — соответствующий цвет CMYK для конкретного устройства в паре с указанным альфа-каналом.

* Прочитать про промежуточные значения свойства (ActualValue, ComputedValue, UsedValue) и процесс их вычисления можно в этой спецификации.

Способы задания цвета в CSS

Ключевые слова

В дополнение к различным числовым и функциональным синтаксисам для , CSS определяет несколько наборов ключевых слов, которые можно использовать для определения цвета.

Именованные цвета

CSS определяет большой набор именованных цветов, чтобы обычные цвета можно было легко писать и читать. 16 названных CSS-цветов исходят из HTML: aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , white и yellow . Большинство остальных происходит от одной версии цветовой системы X11, используемой в системах на основе Unix для указания цветов для консоли.
Полный список можно посмотреть здесь.

SYSTEM COLOR

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

Прозрачность и цвет текста

transparent – прозрачный черный цвет rgb(0 0 0 / 0); .
currentcolor – значение свойства color для того же элемента.

Цветовое пространство sRGB

Самое первое из изобретенных цветовых пространств.
Все цвета получаются путём смешения трёх базовых (красного, зелёного и синего) цветов в различных пропорциях. Доля каждого базового цвета в итоговом может восприниматься, как координата в соответствующем трёхмерном пространстве, поэтому это пространство часто называют цветовым кубом.

Цветовая система RGB

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

RGB() / RGBA()
/* * @param | > --red Красный канал * @param | > --green Зелёный канал * @param | > --blue Синий канал * @param | > [--alpha: 100%] Прозрачность */ color: rgb (var(--red) var(--green) var(--blue) / var(--alpha)); 

Первые три аргумента —red , —green , —blue указывают красный, зеленый и синий каналы цвета соответственно. 0% — минимальное значение для этого цветового канала в sRGB, а 100% — максимальное значение. Запись в процентах эквивалентна числовой записи, но с другим диапазоном: 0 — минимальное значение для цветового канала, 255 — максимальное.
—alpha – необязательный аргумент, он определяет прозрачность цвета. Если он задан числом, то диапазон значения составляет от 0 (представляет полностью прозрачный цвет) до 1 (представляет полностью непрозрачный цвет). Если значение задано в процентах, то 0% – полностью непрозрачный цвет, а 100% – полностью прозрачный цвет. Дефолтное значение — 100%.
rgbа() имеет точно такой же синтаксис, только без слеша, и существует как легаси, потому что раньше rgb() не поддерживала четвертый аргумент. Например:

color: rgba (var(--red) var(--green) var(--blue) var(--alpha));
HEX

HEX-нотация цвета CSS позволяет задавать цвет sRGB, задавая каналы в виде шестнадцатеричных чисел, что аналогично тому, как цвета часто записываются непосредственно в компьютерном коде.
Синтаксис – это токен , значение которого состоит из 3, 4, 6 или 8 шестнадцатеричных цифр. Другими словами, шестнадцатеричный цвет записывается как хеш-символ «#», за которым следует некоторое количество цифр 0–9 или букв a-f (регистр букв не имеет значения – #00ff00 идентичен #00FF00 ).

6 цифр
color: #fffff;

Первая пара цифр, интерпретируемая как шестнадцатеричное число, указывает красный канал цвета, где 00 представляет минимальное значение, а ff (255 в десятичном виде) представляет максимум. Следующая пара цифр обозначает зеленый канал, и затем синий.

8 цифр
color: #fffff00;

Первые 6 цифр интерпретируются идентично 6-значной записи. Последняя пара указывает прозрачность цвета: 00 — полностью прозрачный цвет, ff — полностью непрозрачный.

3 цифры
color:#fff;

Это более короткий вариант 6-значного обозначения. Первая цифра указывает красный канал цвета, где 0 минимальное значение, а f — максимум. Следующие две цифры представляют зеленый и синий каналы, соответственно.

4 цифры
color: #fff0;

Это более короткий вариант 8-значной записи, «расширенный» так же, как и 3-значная запись. Первая цифра указывает красный канал цвета, затем зеленый, синий и альфа-канал соответственно.

Цветовая система HSL

Была изобретена для телевидения в 1938 году Жоржем Валенси в качестве метода добавления цветовой кодировки к существующим черно-белым (т.е. содержащим только L-сигнал) передачам, позволяя существующим приемникам получать передачи с новым форматом цветового вещания.

HSL() / HSLA()
/* * @param | > --hue Оттенок, угол цветового круга * @param > --saturation Насыщенность * @param > --lightness Яркость * @param | > [--alpha: 100%] Прозрачность */ color: hsl (var(--hue) var(--saturation) var(--lightness) / var(--alpha));

—hue – тон цвета, представленный в виде угла цветового круга (радуга, закрученная в круг). Угол 0deg представляет красный (как и 360deg, 720deg и т.
д.). Остальные оттенки распределены по кругу, поэтому 120deg представляет зеленый, а 240deg – синий. Аргумент также может быть числом, которое интерпретируется как количество градусов.

—saturation – насыщенность, 100% – полностью насыщенный яркий цвет, а 0% – полностью ненасыщенный.
—lightness – светлота, 50% – «нормальный» цвет, 100% — белый, 0% — черный. Если насыщенность или яркость меньше 0% или больше 100%, они фиксируются на этих значениях перед преобразованием в цвет RGB.
—alpha – альфа-канал цвета. Интерпретируется идентично четвертому аргументу функции rgb().

Преимущество HSL перед RGB в том, что она гораздо более интуитивна: можно угадать, какие цвета он хочет, а затем настроить. Также проще создавать наборы подходящих цветов (сохраняя одинаковый оттенок и изменяя насыщенность и яркость).

Цветовая система HWB

Цилиндрическая система представления точек пространства sRGB. Была разработана Элви Рэем Смитом в 1996 году, чтобы быть более интуитивно понятной для людей и немного облегчить вычисления. Ментальная модель заключается выборе основного оттенка, а затем смешивании его с белым и / или черным, чтобы получить желаемый цвет.

HWB
/* * @param | > --hue Оттенок, угол цветового круга * @param > --whiteness Белизна * @param > --blackness Чернота * @param | > [--alpha: 100%] Прозрачность */ color: hwb (var(--hue) var(--whiteness) var(--blackness) / var(--alpha));

—hue – оттенок, интерпретируется идентично hsl ().
—whiteness – количество белого для смешивания в процентах от 0% (без белизны) до 100% (полная белизна).
—blackness – количество черного, которое нужно смешать, также от 0% (без черноты) до 100% (полная чернота). Значения вне этих диапазонов делают функцию недействительной. Если их сумма больше 100%, то на стадии вычисления они нормализуются так, чтобы составлять в сумме 100%, с той же пропорцией.
—alpha – альфа-канал цвета, интерпретируется аналогично предыдущим случаям.

Цветовое пространство LAB

В отличие от других цветовых пространств, которые являются набором аппаратных данных для воспроизведения цвета на экране, Lab абсолютно определяет цвет. Необычный выбор осей цветности в системе — следствие стремления сделать ее линейной для человеческих глаз. Такое пространство
называется равноконтрастным. За основу взят цветовой квадрат, на него положена декартова система координат (a\b) с центром в центре квадрата, в центр воткнута ось яркости.

LAB()
/* * @param > --lightness Яркость CIE * @param > --a От зеленого до красного * @param > --b От синего до желтого * @param | > [--alpha: 100%] Прозрачность */ color: lab (var(--lightness) var(--a) var(--b) / var(--alpha));

—lightness – яркость CIE. Как правило, это число от 0% (черный цвет) до 100% (белый цвет). Значения менее 0% должны быть зафиксированным до 0% во время рендеринга; допустимы значения, превышающие 100% для прямой совместимости с широким динамическим диапазоном.
—a – положение цвета в диапазоне примерно от зеленого до красного.
—b – положение цвета в диапазоне примерно от синего до желтого. Эти два значения являются знаковыми (допускаются как положительные, так и отрицательные значения) и теоретически не ограничены (но на практике не превышают ± 160).
—alpha – альфа-канал цвета, интерпретируется аналогично предыдущим случаям.

Цветовое пространство LCH

По сути то же самое что и LAB, только в полярных координатах, поэтому за основу взят цветовой круг. Само пространство цилиндрическое.

LCH()
/* * @param > --lightness Яркость CIE * @param > --chroma Количество цвета * @param | > --hue Оттенок, угол цветового круга * @param | > [--alpha: 100%] Прозрачность */ color: lch (var(--lightness) var(--chroma) var(--hue) / var(--alpha));

—lightness – яркость CIE. Как правило, это число от 0% (черный цвет) до 100% (белый цвет). Значения менее 0% должны быть зафиксированным до 0% во время рендеринга; допустимы значения, превышающие 100% для прямой совместимости с широким динамическим диапазоном.
—chroma – количество цвета (насыщенность).
—hue – угол оттенка. Он интерпретируется аналогично аргументу —hue в hsl() , но не отображает оттенки на углы одинаково, поскольку они равномерно распределены по восприятию. Вместо этого 0 градусов указывают вдоль положительной оси a (в пурпурно-красный цвет), 90 градусов указывают вдоль положительной оси b (в сторону желтого цвета горчицы), 180 градусов указывают вдоль отрицательной оси а (в сторону зеленоватого голубого) и 270 градусов вдоль отрицательной оси b (в сторону небесно-голубого цвета). Если предоставленное значение является отрицательным или больше или равно 360deg , оно устанавливается равным значению по модулю 360.
—alpha – альфа-канал цвета, интерпретируется аналогично предыдущим случаям.

Цветовое пространство cmyk

Пространство создано для удобства полиграфии. В отличии от всех предыдущий, оперирует смешением типографских красок, а не цветов. Наличие черного объясняется тем, что смещение пурпурной, голубой и жёлтой красок даёт скорее грязно-коричневый или грязно-серый цвет в силу неидеальности красителей и погрешностей в пропорциях компонентов. Также, смешение всех трех пигментов излишне смачивает бумагу, повышаю риск деформации и время высыхания.

device-cmyk()
/* * @param | > --cyan Голубой * @param | > --magenta Пурпурный * @param | > --yellow Жёлтый * @param | > --black Чёрный * @param | > [--alpha: 100%] Прозрачность * @param > [--color: naively convert] Запасной цвет */ color: device-cmyk( var(--cyan) var(--magenta) var(--yellow) var(--black) / var(--alpha) var(--color));

Первые четыре аргумента —cyan , —magenta , —yellow и —black задают голубой, пурпурный, желтый и черный компоненты по
порядку в виде числа от 0 до 1 или процента от 0% до 100%. Эти два использования эквивалентны и отображаются друг на друга линейно. Значения меньше 0 или 0% или больше 1 или 100% не являются недействительными; вместо этого они фиксируются на 0/0% или 1/100% во время вычисленного значения.
—alpha – альфа-канал цвета, интерпретируется аналогично предыдущим случаям.
—color – запасной цвет, используемый, когда пользовательский агент не знает, как точно преобразовать цвет CMYK в RGB. Если опущено, по умолчанию используется цвет CMYK, наивно преобразованный в RGBA:

red = 1 - min(1, cyan * (1 - black) + black) green = 1 - min(1, magenta * (1 - black) + black) blue = 1 - min(1, yellow * (1 - black) + black)

Источники и ссылки

  1. О цветовых пространствах
  2. Основы теории цвета. Система CIE XYZ
  3. Улучшаем цвета в вебе (для эплофилов)
P.S. Это тоже может быть интересно:
  • CSS-выражения от контейнера для дизайнеров
  • День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari
  • CSS переходит на новый, шестой уровень каскадности

Установка цвета в CSS

Различным объектам на странице часто нужно указать цвет. Это можно сделать способами, которые рассмотрены в данной теме. Также мы рассмотрим, как установть в CSS прозрачный цвет элемента.

Название цвета

Существуют стандартные веб-цвета, которые имеют свои названия. Для их использования нужно указать название цвета. Например, чтобы задать текстовому элементу зелёный цвет, нужно установить ему такой стиль:

color: Green;

Чтобы найти таблицу веб-цветов, достаточно в любом поисковике набрать: веб-цвета.

Система RGB

  • сначала интенсивность красного цвета
  • потом интенсивность зелёного
  • потом интенсивность синего

Каждое число может иметь значение от 0 до 255. 0 — это минимальная интенсивность, а 255 — максимальная.

Например, чтобы установить тексту такой цвет, нужно указать ему следующий стиль:

color: rgb(156, 22, 181);

Вместо чисел можно указывать проценты, 0% — это минимальная интенсивность, 100% — максимальная интенсивность. Тот же цвет можно получить, если установить стиль так:

color: rgb(61%, 0.8%, 71%);

RGBA

RGBA — это такой же способ установки цвета, что и RGB. Но у него есть ещё одно число — альфа канал. Это степень прозрачности. Он позволяет установить в CSS порзрачный цвет, то есть сделать элемент прозрачным. При этом через элемент можно видеть фон блока или другой элемент, который оказался под текущим элементом при позиционировании. Прозрачность может иметь значения от 0 до 1. При 1 элемент является непрозрачным. При 0 элемент является полностью прозрачным, то есть, его не видно. Любое число между этими значениями делает элемент прозрачным. Для установки цвета в CSS свойстве пишется слово rgba, затем в скобках через запятую указываются цвета и прозрачность. Чтобы сделать текст таким же цветом, но прозрачным, стиль нужно установить так:

color: rgba(156, 22, 181, 0.5);

Код в шестнадцатиричной системе

  • первые два знака устанавливают интенсивность красного цвета
  • вторые два знака устанавливают интенсивность зелёного
  • третьи два знака устанавливают интенсивность синего

Перед числом ставится знак #. Чтобы устаносить такой же цвет текста, стиль нужно указать так:

color: #9C16B5;

Если в каждом из трёх значений цвета знаки повторяются, то цвет можно задать не шестизначным числом, а трёхзначным. Для примера установим разными способами один и тот же цвет:

color: #FFCC00; color: #FC0;

В коде цвета буквы могут быть как большими, так и маленькими.

Система HSL

При установке цвета в системе HSL, указываются три параметра — оттенок, насыщенность и осветление. Оттенок определяется на основе цветового кгруга. Он указывается в градусах от 0 до 360. 0 градусов соответствует самому верху круга. При этом, никаких знаков ставить не нужно, указывается просто число.

цветовой круг

Насыщенность определяет яркость цвета. Она указывается в процентах от 0 до 100.

Осветление может сделать цвет более светлым или более тёмным. Указывается также в процентах. Для установки цвета пишется слово hsl, затем в скобках перечисляются параметры.

Чтобы задать тексту тот же цвет, нужно указать ему следующий стиль:

color: hsl(291, 88%, 39%);

HSLA

HSLA — это способ установки цвета, при котором так же, как и при RGBA, есть альфа канал, устанавливающий прозрачный цвет элемента. Прозрачность также принимает значения от 0 до 1. Для установки цвета пишется слово hsla, затем в скобках указываются параметры и прозрачность. Чтобы сделать текст таким же цветом, но при этом прозрачным, ему нужно установить такой стиль:

color: hsla(291, 88%, 39%, 0.5);

Подбор цвета

Подобрать нужный цвет можно, используя графический редактор. Например, в Photoshop для выбранного цвета показываются параметры во всех рассмотренных системах. Многие другие редакторы имеют подобную функцию. Современные редакторы кода тоже помогают подобрать цвет, когда вы работаете с файлом в формате css. В том числе, Visual studio code даёт такую возможность. Если вам нужен цвет элемента другого сайта, то вы можете найти этот элемент с помощью средств разаработки, которые есть в браузерах. В свойствах элемента вы найдёте нужный цвет.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2024 © basecourse.ru Все права защищены

CSS RGBa — прозрачность фона

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

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

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

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

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

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

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

.element{ background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#990000ff, endColorstr=#990000ff); zoom: 1; }

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

Использование RGBa не ограничивается только фоновым цветом у блоков…

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

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