Background-color

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Basic Setup and Application

Свойство background для работы с фоном

Go ahead and create a new html document and add the basic sytnax in it like so:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Background Opacity Example</title>
</head>
<body>

<!-- STYLE SECTION -->

<style type="text/css">

</style>

<!-- HTML SECTION -->

</body>
</html>

Before applying the property, lets first give some key explanation. The syntax for and its main values would be:

 /* Fully opaque */
opacity: 1;
opacity: 1.0;

/* Translucent */
opacity: 0.6;

/* Fully transparent */
opacity: 0.0;
opacity: 0;

opacity: inherit;

As you can see, values vary from 0 to 1, meaning 0% to 100%. To apply this property, first add an element in HTML:

<!-- HTML SECTION  -->

<h3 class="light">This line will have a light background.</h3>
<h3 class="half">This line will have a half normal background.</h3>
<h3 class="heavy">This line will have a heavy background.</h3>

<!-- STYLE  SECTION -->

<style type="text/css">
h3 {
	background-color: green;
	color: white;
}

.light {
	opacity: 0.2;
}
.half {
	opacity: 0.5;
}
.heavy {
	opacity: 0.8;
}
</style>

The view in the browser would be: like this:

Basic Background Opacity Application

RGBA

Background-size

Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity
здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba
, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..

Рис. 1. Синтаксис применения rgba

В примере 2 показано применение формата RGBA для создания полупрозрачного фона.

Пример 2. Полупрозрачный фон

HTML5
CSS3
IE 9+
Cr
Op
Sa
Fx

rgbaГоббс одним из первых осветил эту проблему с позиций психологии.

Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.

Рис. 2. Полупрозрачный фон и непрозрачный текст

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

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

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

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

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

А не поддерживать его будут 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 не ограничивается только фоновым цветом у блоков…

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

1. Свойство opacity

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

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

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

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

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок

CSS:

.background {
text-align: center;
background: url(«background.jpg») top center;
padding: 120px 10px;
}
.transparent {
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 50px;
line-height: 50px;
text-transform: uppercase;
background: #000;
color: #FFF;
mix-blend-mode: multiply;
padding: 10px 20px;
display: inline-block;
/* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.background {

text-aligncenter;

backgroundurl(«background.jpg»)topcenter;

padding120px10px;

}

.transparent {

font-familyTahoma,sans-serif;

font-weightbold;

font-size50px;

line-height50px;

text-transformuppercase;

background#000;

color#FFF;

mix-blend-modemultiply;

padding10px20px;

displayinline-block;

/* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */

}

В итоге у нас получится это:

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

Результат примера можно посмотреть на рис. 6.

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

Решается это заменой свойства background-color на background.

backgroundbackground-color

Цвет фона блока

Свойство background-color устанавливает цвет фона. Значением этого свойства
является цвет, указаннный одним из способов, существующих в CSS. Кроме того, оно
принимает такие значения:

background-color: transparent — прозрачный фон (по умолчанию)

background-color: inherit — значение принимается от родительского элемента

Значение transparent используется в CSS, когда нужно вернуть прозрачный фон блоку,
если ранее он уже был изменён.

Создадим блок, зададим ему размеры и установим цвет фона.

Стиль:

789101112

#div1
  {
  width: 300px;
  height: 50px;
  background-color: Green;
  }

HTML код:

16	<div id="div1">Блок с фоном</div>

Прозрачность различных элементов

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

CSS прозрачность картинки.

Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.

Прозрачность

Результат:

Прозрачность на CSS при наведении курсора на картинку.

Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный — это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.

Прозрачность

Результат можете посмотреть в демо.

Прозрачность фона на CSS.

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

В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.

Пример кода:

Прозрачность
Текст

Вот результа размещенного выше кода:

Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.

Способ 1 — значение transparent

Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:

Color: transparent;

Такой текст нельзя будет увидеть на странице.

Способ 2 — цветовой режим rgba

А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:

Background: rgb(230, 121, 156);

Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.

Background: rgba(0, 0, 0, 0);

В таком случае остальные 3 цифры особой роли не играют.

Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в , можете ознакомиться, если интересно.

Способ 3 — opacity

Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .

В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в css. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.

Результат примера с RGBA:

Второй скриншот намного лучше смотрится, чем первый.

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

Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен

Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3
, реализовывался он чисто в графических программах.

Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer
, тогда добавляйте свойство filter
и не забудьте закомментировать, чтобы не пострадала валидность кода.

More Examples

Example

The opacity property adds transparency to the background of an element, and
to all of its child elements as well. This makes the text inside a transparent element hard to read:

div.first { opacity: 0.1;}div.second {
opacity: 0.3;}div.third { opacity: 0.6;
}

Example

To not apply opacity to child elements (like in the example above) use RGBA color values
instead.
The following example sets the opacity for the background color, but not for the text:

div.first { background: rgba(76, 175, 80, 0.1);}div.second { background: rgba(76, 175, 80, 0.3);
}div.third { background: rgba(76, 175, 80,
0.6);}

Try it Yourself »

Tip: Learn more about RGBA Colors in CSS RGBA Colors.

Example

How to use JavaScript to change the opacity for an element:

Способ 5: Paint

Если возможности использовать Paint 3D нет или вы считаете, что в этом нет необходимости, рассмотрите как альтернативу стандартный Paint. В нем есть функция обрезки, однако прозрачный фон сохраняется только в том случае, если вы копируете вырезанный объект и вставляете его на другую картинку, так же открытую в отдельном окне программы. Если же вы планируете сохранить изображение с прозрачным фоном, этого сделать не получится — он заменится на белый и понадобится дополнительное редактирование. С наложением же функциональность Paint поможет справиться без надобности обращения к другим программам. Заранее подготовьте два изображения для наложения и выполните такие действия:

Откройте меню «Пуск», найдите там «Paint» и запустите данное приложение.

Разверните меню «Файл» и выберите вариант «Открыть».

Откройте ту картинку, которая должна наложиться на другую, разверните инструмент «Выделить» и используйте функцию «Выделить все». Вместо этого можно зажать горячую клавишу Ctrl + A.

Используйте комбинацию Ctrl + C для копирования выделенного.

Запустите Paint в новом окне, где откройте изображение для наложения подготовленной картинки с прозрачным фоном. Разверните блок с инструментами «Выделить» и активируйте галочку возле пункта «Прозрачное выделение».

Нажмите «Вставить» или примените стандартную горячую клавишу Ctrl + V.

Переместите вставленное изображение с прозрачным фоном в любое удобное место на изображении, после чего переходите к его сохранению.

Снова откройте меню «Файл», наведите курсор на «Сохранить как» и выберите вариант «Изображение в формате PNG».

Выберите название для файла и сохраните его в удобном месте на компьютере.

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

Подробнее: Создание прозрачного фона для картинки онлайн

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Способ 2. Не замороченный

В редких случаях разработчики решают проблему с внедрением полупрозрачной картинки путем вставки…уже готовой полупрозрачной картинки! Для этого используются изображения, сохраненные в формате PNG-24. Данный графический формат позволяет задавать 256 уровней полупрозрачности.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Пример 1

Пример 1
Текст на рисунке в формате png.

Однако такой способ не удобен по нескольким причинам:

Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
Нельзя видоизменять цвета фона в css;
Если в браузере отключена функция отображения изображений, то исчезнет.

Прокрутка фона

Есть возможность установить, как будет двигаться фон блока при прокрутке страницы, а также при прокрутке
самого блока. Это делается с помощью свойства background-attachment. Оно может
принимать такие значения:

background-attachment: scroll — фон не движется относительно блока и движется
вместе с блоком при прокрутке страницы (по умолчанию)

background-attachment: fixed — фон зафиксирован относительно левого верхнего
угла окна браузера

background-attachment: local — фон движется вместе с содержимым при прокрутке
блока

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

Стиль:

353637
3839404142

#div5
  {
  width: 500px;
  height: 450px;
  background-image: url("image.jpg");
  overflow: auto;
  background-attachment: local;
  }

HTML код:

464748

<div id="div5">
<div style="height: 800px; width: 10px; border: 1px solid Red"></div>
</div>

Попробуйте установить другие варианты прокрутки фона. Посмотрите, как будет двигаться фон блока.

RGBA

background-color: rgba(r, g, b, a);

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

Результат примера можно посмотреть на рис. 6.

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

Решается это заменой свойства background-color на background.

backgroundbackground-color

Прокрутка фона

background-attachment: fixed — фон зафиксирован относительно левого верхнего
угла окна браузера

background-attachment: local — фон движется вместе с содержимым при прокрутке
блока

Стиль:

353637
3839404142

#div5
  {
  width: 500px;
  height: 450px;
  background-image: url("image.jpg");
  overflow: auto;
  background-attachment: local;
  }

HTML код:

464748

<div id="div5">
<div style="height: 800px; width: 10px; border: 1px solid Red"></div>
</div>

Попробуйте установить другие варианты прокрутки фона. Посмотрите, как будет двигаться фон блока.

Цвет в CSS

Последнее обновление: 21.04.2016

В CSS широкое распространение находит использование цветов. Чтобы установить цвет текста, фона или границы, нам надо указать цвет.

Например, определим красный цвет для фона элемента div:

div{
	background-color: red;
}

В CSS есть несколько различных свойств, которые в качестве значения требует определенный цвет. Например, за установку цвета текста отвечает
свойство color, за установку фона элемента — свойство background-color, а за установку цвета границы —
border-color.

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

Шестнадцатеричного значение. Оно состоит из отдельных частей, которые кодируют в шестнадцатеричной системе
значения для красного, зеленого и синего цветов.
Например, #1C4463. Здесь первые два символа представляю значение красной компоненты цвета, далее
— значение зеленой компоненты цвета и — значение уровня синего цвета. Финальный цвет, который мы видим на веб-странице,
образуется с помощью смешивания этих значений.
Если каждое из трех двухзначных чисел содержит по два одинаковых символа, то их можно сократить до одного. Например,
можно сократить до , или, к примеру, можно сократить до

При этом
не столь важно, в каком регистре будут символы. Значение RGB

Значение RGB также представляет последовательно набор значений для красного, зеленого и синего цветов
(Red — красный, Green — зеленый, Blue — синий)

Значение RGB. Значение RGB также представляет последовательно набор значений для красного, зеленого и синего цветов
(Red — красный, Green — зеленый, Blue — синий)

Значение каждого цвета кодируется тремя числами, которые могут представлять либо
процентные соотношения (0–100%), либо число от 0 до 255.
Например
background-color: rgb(100%,100%,100%);
Здесь каждый цвет имеет значение .
И в итоге при смешивании этих значений будет создаваться белый цвет. А при значениях в 0% будет генерироваться черный цвет:
background-color: rgb(0%, 0%, 0%);
Между 0 и 100% будут находиться все остальные оттенки.
Но, как правило, чаще применяются значения из диапазона от 0 до 255. Например,
background-color: rgb(28, 68, 99);

Значение RGBA. Это тоже самое значение RGB плюс компонент прозрачности (Alpha). Компонент прозрачности
имеет значение от 0 (полностью прозрачный) до 1 (не прозрачный). Например:
background-color: rgba(28, 68, 99, .6);

Значение HSL. HSL представляет аббривиатуру: Hue — тон, Saturation — насыщенность и Lightness — осветленность.
HSL задает три значения. Первое значение Hue угол в круге оттенков — значение в градусах от 0 до 360.
Например, красный — 0 (или 360 при полном обороте круга). Каждый цвет занимает примерно 51°.
Второе значение — Saturation — представляет насыщенность, то указывает, насколько чистым является цвет. Насыщенность определяется в
процентах от 0 (полное отсутствие насыщенности) до 100% (яркий, насыщенный цвет).
Третье значение — Lightness — определяет осветленность и указывается в процентах от 0 (полностью черный) до 100 (полностью белый).
Для получения чистого цвет применяется значение 50 %.
Например:

background-color: hsl(206, 56%, 25%);

Данный цвет является эквивалентом значений и

Значение HSLA. Аналогично RGBA здесь к HSL добавляется компонента прозрачности в виде значения от 0 (полностью прозрачный) до 1 (не прозрачный). Например:
background-color: hsl(206, 56%, 25%, .6);

Строковые значения. Существует ряд константных строковых значений, например, red (для красного цвета) или green
(для зеленого цвета). К примеру,
color: red;
является эквивалентом
color: #ff0000;

Прозрачность

Ряд настроек цвета позволяют установить значение для альфа-компоненты, которая отвечает за прозрачность. Но также в CSS есть специальное свойство,
которое позволяет установить прозрачность элементов — свойство opacity. В качестве значения оно принимает число от 0 (полностью прозрачный)
до 1 (не прозрачный):

div{
	width: 100px;
	height: 100px;
	
	background-color: red;
	opacity: 0.4;
}

НазадВперед

Способ 2 — цветовой режим rgba

Background: rgb(230, 121, 156);

Background: rgba(0, 0, 0, 0);

В таком случае остальные 3 цифры особой роли не играют.

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

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков …

К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28. Это комбинация букв и цифр, которые указывают цвет.

Всегда нужно начинать с указания символа хэша (#), за которым следует шесть букв или цифр от до 9 и от A до F.

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения (которые являются компонентами Red-Green-Blue в цвете), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

Некоторые графические программы, такие как Photoshop, Gimp и Paint.NET, позволяют указывать цвета в шестнадцатеричном формате.

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

p
{
color: #FFFFFF;
}

При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33.

Use a Lower Opacity CSS Pseudo Element to Create a Colored Background Layer

Let’s suppose you have the following elements; a content child element nested inside a parent element:

<div id="parent">
  <div id="child">
    Text
  </div>
</div>

With a structure like that, you can create a background layer (having no content) via CSS pseudo elements like so:

#parent::after { content: ''; }

Now you can make the background layer the same size as the parent and position it relative to the parent like so:

#parent { height: 45px; position: relative; }
#parent::after {
	content: ''; 
	width: 100%; 
	height: 100%;
	background-color: pink; 
	opacity: 0.5; 
	position: absolute; 
	top: 0; 
	left: 0;
	z-index: -1;
}

You should now see a pink colored background layer with an opacity of 50% that only applies to the background color and not the content.

Following is a quick explanation of how the generated content (our background layer) is styled:

To generate empty/invisible content we can simply set the property’s value to an empty string or a space character.
Setting and to ensures the generated content is of the same size as the parent element.
Setting a lower makes the background layer transparent.
on the parent element and on the generated content ensures the generated content is positioned relative to the parent.
Setting and ensures the generated content is positioned to the top left edge of the parent element.
Setting a negative value ensures the generated content recedes to the background and all child element content appears above it.

If the parent element has a background color of its own, then you can set a positive value on the generated content (the background layer) and a higher z-index value on the child element along with relative positioning like so:

#parent { height: 45px; background-color: yellow; position: relative; }
#parent::after {
	content: ''; 
	width: 100%; 
	height: 100%; 
	background-color: pink; 
	opacity: 0.5; 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 1;
}
#child {position: relative; z-index: 2;}