Свойство background-blend-mode

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB,
you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Свойство CSS background

Это свойство позволяет определять в CSS фон любого элемента на странице. Оно универсальное, т.е. позволяет задавать сразу несколько характеристик (более специфичных свойств) фона, которые можно указывать в любом порядке.

Обратите внимание, что нужно указывать через слэш (/) сразу после. Такое написание, конечно, экономит много времени, но я так не делаю

Почему?

Такое написание, конечно, экономит много времени, но я так не делаю. Почему?

1. Код хуже читается. Особенно если свойства указаны в случайном порядке

2. Если какое-то свойство не задано — используется дефолтное, соответственно иногда возникают непредвиденные последствия. Поэтому для новичков или не очень внимательных людей не подходит.

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

Итак, помимо универсального свойства , в CSS есть 8 свойств для работы с фоном элемента:

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33ff66.

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

All CSS Background Properties

Property	Description
background	Sets all the background properties in one declaration
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page
background-clip	Specifies the painting area of the background
background-color	Sets the background color of an element
background-image	Sets the background image for an element
background-origin	Specifies where the background image(s) is/are positioned
background-position	Sets the starting position of a background image
background-repeat	Sets how a background image will be repeated
background-size	Specifies the size of the background image(s)

❮ Previous
Next ❯

Стажер в отдел продюсерства (продюсер/методист)

Background image with color overlay

Have you heard of a background image with color overlay?

It’s not a typical method where you have the background color behind the image it’s actually the opposite, which means you have a color over the background image.

I have been saying you need to use a transparent image but this is one of those methods where you can use images with a solid background.

It’s a very effective way to show some image effects. For this, you have to use some CSS pseudo elements.

Here is the CSS:

.block_1 {
  background: url(image.jpg) no-repeat 0, 0;
  height: 200px;
  width: 280px;
  position: relative;
}
.block_1:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(255, 0, 0, 0.5);
}

Demo

CSS Свойства

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-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-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-eventspositionquotesresizerighttab-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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Установка дополнительного цвета со смещением на 60°

Это, вероятно, самое простое. Можно использовать один из двух способов:

1. . Это первое решение, которое приходит в голову, но оно не самое лучшее, потому что может повлиять на дочерние элементы. Если необходимо, его эффект можно отменить противоположным фильтром.
2. . Просто добавить 60 к hue. Значение не лимитировано числом 360, оно спокойно прокручивается по цветовому кругу. Таким образом ,  и так далее.

Учитывая это, мы можем добавить класс-модификатор для наших дополнительных элементов, который добавляет 60 к значению оттенка. Поскольку переменные в CSS не могу самоизменяться (т. е. нет такой вещи, как , нужно добавить новую вспомогательную переменную для манипуляции с оттенком.

.btn {
/* (…) */
—h: var(—hue);
background: hsl(var(—h), calc(var(—sat) * 1%), calc(var(—light) * 1%));
border:.1em solid hsla(var(—h), calc(var(—sat) * 1%), var(—border-light), var(—border-alpha));
}

1 2 3 4 5 6

.btn{ /* (…) */ —hvar(—hue); backgroundhsl(var(—h),calc(var(—sat)*1%),calc(var(—light)*1%)); border.1emsolid hsla(var(—h),calc(var(—sat)*1%),var(—border-light),var(—border-alpha)); }

А затем переопределить ее в классе-модификаторе:

.btn—secondary {
—h: calc(var(—hue) + 60);
}

1 2 3

.btn—secondary{ —hcalc(var(—hue)+60); }

Самое лучшее в этом подходе — это автоматический пересчет и применение всех значений.

Собрав все вместе, мы получаем решение для всех трех поставленных задач на чистом CSS.

See the Pen CSS Automatic switch font color depending on element background…. FAIL by Facundo Corradini (@facundocorradini) on CodePen.

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

Что, во имя CSS, с этим делать?

Что еще нужно знать про CSS background

Множественные фоны

CSS позволяет использовать множественные фоны, т.е для одного элемента можно задать несколько фоновых изображений и/или градиентов.

Это можно делать либо через универсальное свойство :

Либо через отдельные свойства фона 

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

В приведенном ниже примере попробуйте изменить размеры основного элемента (потяните за его правый нижний угол).

Режимы наложения — background-blend-mode

По умолчанию, если у элемента задано и фоновое изображение и цвет заливки, изображение (конечно, если оно непрозрачное) просто перекрывает заливку. С множественными изображениями та же история — верхнее перекрывает нижнее.

В CSS можно указывать режим(ы) наложения фонов. Это делается при помощи свойства , которое поддерживается всеми современными браузерами.

Для всех, кто пользуется Фотошопом или Иллюстратором и знаком с режимами смешивания слоев (Blend Modes), это свойство будет очень кстати. Особенно учитывая, что названия режимов смешивания совпадают с названиями в графических редакторах:

1. normal
2. multiply
3. screen
4. overlay
5. darken
6. lighten
7. color-dodge
8. color-burn
9. hard-light
10. soft-light
11. difference
12. exclusion
13. hue
14. saturation
15. color
16. luminosity

Как поменять размер видео в готовом коде

Если размер видео, который у вас получился после настройки кода не подошел к вашему сайту (например, вы сменили дизайн и ширина сайдбара у вас уменьшилась) не обязательно идти в Youtube и делать новый код. Можно вручную поменять цифры, отвечающие за ширину и высоту проигрывателя (width=”560″ height=”315″), только пропорции подберите подходящие.

Точно также вы можете руками поправить все характеристики плеера, описанные выше.

На этом у меня все. Удачи.

Цветовая модель RGBA

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

селектор {
color : rgba(R,G,B,A);, где:
}

• R означает Red (красный)
• G означает Green (зеленый)
• B означает Blue (синий)
• A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от до 1, где:

• — цвет невидимый.
• 1 — цвет непрозрачный.

Давайте для демонстрации возможностей цветовой модели RGBA рассмотрим пример в котором на примере зелёного цвета, мы будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:

Применение RGBA в CSS.1
…/* и так до десятого блока */
1

. На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен

Во-вторых, мы использовали CSS свойство display, которое определяет, как должен отображаться элемент. В нашем случае, с этим свойством мы использовали значение inline-block, которое позволяет нам выстроить все элементы

в линейку (сделали элементы «блочно-строчными»).
Подробное изучение блочной и строчной модели CSS предусмотрено в учебнике позднее в статье «Блочная и строчная модель в CSS»

На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен. Во-вторых, мы использовали CSS свойство display, которое определяет, как должен отображаться элемент

В нашем случае, с этим свойством мы использовали значение inline-block, которое позволяет нам выстроить все элементы

в линейку (сделали элементы «блочно-строчными»).
Подробное изучение блочной и строчной модели CSS предусмотрено в учебнике позднее в статье «Блочная и строчная модель в CSS».

Результат нашего примера:

Рис. 47 Пример задания цвета с помощью RGBA в CSS.

Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel — which specifies the opacity
for a color.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the
alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

The following example defines different HSLA colors:

Example

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark
green with opacity */#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green
with opacity */

Положение фона

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat. Также можно воспользоваться универсальным background, как показано в примере 4.

Пример 4. Положение фона

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Положение фонового рисунка</title>
<style>
body {
background: url(/example/image/tomato.jpg) right bottom no-repeat fixed; /* Параметры фона */
margin-right: 200px; /* Отступ справа */
}
</style>
</head>
<body>
<h1>Консервы из помидор</h1>
<p>Плоды отбирают с хорошей ровной окраской, плотные и однородные по
размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды — 35 г
поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и
ставят на прогревание, выдерживая в кипящей воде: литровые — 5-8,
трехлитровые — 12-15 мин. Затем их укупоривают и охлаждают.</p>
<p>Примерный расход сырья и продуктов на литровую банку: помидоров
красных отборных — 550-600 г, соли — 15 г, лимонной кислоты — 3 г.</p>
</body>
</html>

Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background. Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right.

Рис. 5. Фоновая картинка в правом нижнем углу окна

Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:

• top left = left top = 0% 0% (в левом верхнем углу);
• top = top center = center top = 50% 0% (по центру вверху);
• right top = top right = 100% 0% (в правом верхнем углу);
• left = left center = center left = 0% 50% (по левому краю и по центру);
• center = center center = 50% 50% (по центру);
• right = right center = center right = 100% 50% (по правому краю и по центру);
• bottom left = left bottom = 0% 100% (в левом нижнем углу);
• bottom = bottom center = center bottom = 50% 100% (по центру внизу);
• bottom right = right bottom = 100% 100% (в правом нижнем углу).

Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100%. Они равнозначны и дают одинаковый результат.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Фиксированный задний фон

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

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.

<!DOCTYPE html>
<html>
<head>
	<title>Пример фиксированного фонового изображения</title>
<style> 
div {
height: 600px; /* устанавливаем высоту элемента */
}
.primerFixed {
background-image: url('nich.jpg'); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-attachment: fixed; /* указываем, что задний фон будет зафиксирован */
background-position: center; /* центрируем задний фон */
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
</style>
</head>
<body>
	<div></div>
	<div class = "primerFixed"></div>
	<div></div>
</body>
</html>

В данном примере для всех элементов <div> мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.

Результат нашего примера:

Рис. 118 Пример фиксированного фонового изображения.

LSI очередной миф?

Суть LSI-текстов в том, что вместо ключевых слов с прямым вхождением используются синонимы и слова, релевантные запросу.

Например, apple и itunes являются ключевыми словами LSI, поскольку имеют один и тот же контекст и часто встречаются вместе.

Как появился LSI-метод

Метод LSI появился в 1988 году. Тогда его использовали для поиска в научных статьях. Широкое применение он получил в 2011 году. Тогда Google выпустил алгоритм Panda, чтобы лучше понимать тематику материалов и контекст запросов.

Позже Яндекс тоже присоединился к борьбе со спамными материалами. Сначала появился алгоритм Палех. Он учитывал хвост из среднечастотных и низкочастотных запросов. Ну а потом миру явился Баден-Баден, который многих отправил на задворки поисковой выдачи.

Подходы к LSI-текстам

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

Другие же считают, что не стоит заморачиваться ни с какими LSI-ключами. Достаточно писать хорошие экспертные статьи. Нужные ключи, так или иначе, появятся в тексте естественным образом.

И что же? Кто прав? Истина, как обычно, где-то посередине. Не все могут себе позволить качественный текст, когда копирайтер готов вникнуть в тему, покопаться в источниках. Гораздо проще составить подробное ТЗ для копирайтера со всеми ключевыми и LSI-запросами.

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

LSI-слова помогают поисковым роботам лучше определить направление темы статьи и проиндексировать материал, а пользователям — найти ответы на вопросы.

Как парсить LSI-ключи?

Но как уже писали выше экспертные статьи — не для всех. Поэтому полезно владеть инструментами для сбора релевантных запросов. Вот некоторые из них.

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

Они же появляются в качестве подсказок при вводе текста в строку поиска.

Getdirect

Здесь можно узнать количество показов в месяц. А также другие поисковые запросы людей, которые вводили данные ключи.

Парсинг подсветок Yandex и сбор тематических слов

Сервис анализирует топ-50 Яндекса. Выгружает подсветки — то, что выделено жирным в поисковой системе. А также дополнительные слова, задающие тематику — LSI-ключи.

Адвего

Берем статью конкурента из ТОПа. Загружаем ее в Адвего. Теперь мы знаем, какие ключи были использованы в этом материале.

Background.

Ну и в довершении главы немного о базовом свойстве background.

Являясь базовым свойством, background может одновременно принимать те или иные значения от его дочерних свойств:

• background-attachment
• background-color
• background-image
• background-position
• background-repeat

Все эти свойства мы рассмотрели выше, так что вдаваться в подробности нет смысла..

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Background</title></head><body style=»background: url(fon.jpg) fixed repeat-x center«><p style=»background: red«>Фон этого параграфа такой же красный как если бы мы использовали background-color: red.</p><p>А у элемента body в базовом свойстве background указанно сразу четыре возможных значения взятых от его дочерних свойств</p></body></html>

смотреть пример  

RGBA

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, определяющий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

В примере 1 показано изменение цвета фона и текста.

Пример 1. Цвет фона

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Фон</title>
<style>
body {
background-color: #fff1e4; /* Цвет фона веб-страницы */
color: #333; /* Цвет текста веб-страницы */
}
h1 {
color: rgb(231, 104, 93); /* Цвет текста заголовка */
}
</style>
</head>
<body>
<h1>Устойчивость</h1>
<p>Устойчивость по Ляпунову колебательно переворачивает устойчивый прибор.</p>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Цветной фон

Background blend modes

Similar to the overlay method background blend method is not typical background image and color technique but is an advanced method of blending images and color or blending multiple images. CSS blend effect is more like the Photoshop blend effect.

There is a whole list of blend mode you can use

Here is the list:

• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

Adobe works on these elements and they have created a pen to play with these blend modes.

You can create some really cool image effects without any image editor.

.block {
  background: url(image.jpg) no-repeat 0, 0 #99e9ff;
  background-blend-mode: multiply;
  height: 200px;
  width: 280px;
}

Demo

Conclusion

When it comes to using background image and color together it’s a very common web practice but as the web technology is evolving you should know the advance techniques alongside the basic ones. We have discussed most of the techniques here from very basic to advance level.

So it comes down to your preference when to use which technique. But always remember don’t limit yourself with these techniques only keep playing and exploring you will discover your very own technique.

I hope you liked this article and find it useful. Thank you for reading!

Do you know other techniques for using a background with image and color together in CSS? If you do, make sure you share them in the comments below!

Цветовые модели HSL и HSLA

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

• Hue — тон.
• Saturation — насыщенность.
• Lightness — осветленность.

Система HSL использует следующий синтаксис:

hsl(от 0° до 360°, от  до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков (изображенном ниже):

Рис. 48 Круг оттенков, применяемый при задании цвета с использованием HSL.

Красный цвет соответствует значениям — 0° и 360°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240°, фиолетовый — 300° и так далее.

Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100%, где 0% — полное отсутствие насыщенности (тусклый серый), а 100% это чистый и яркий цвет.

Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0°):

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Применение HSL в CSS</title>
<style> 
div {
display : inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
width : 60px; /* устанавливаем ширину для всех <div> элементов */
height : 60px; /* устанавливаем высоту для всех <div> элементов */
}
.test1  {
background-color : hsl(0, 10%, 50%); /* 0 – соответствует красному цвету, 10% - насыщенность, 50%- осветленность (соответствует чистому цвету) */
}
…  /* и так до десятого блока с шагом 10% (увеличение насыщенности) */
.test10  {
background-color : hsl(0, 100%, 50%); /* насыщенность 100% (чистый и яркий цвет) */
}
.test11  {
background-color : hsl(0, 100%, 10%); /* 0 – соответствует красному цвету, 100% - насыщенность (чистый и яркий цвет), 10%- осветленность  */
}
…  /* и так до двадцатого блока с шагом 10% (увеличение осветленности)*/
.test20  {
background-color : hsl(0, 100%, 100%); /* как вы можете заметить осветленность 100% дает белый цвет */
}
</style>
</head>
	<body>
		<div class = "test1"> hsl(0, 10%, 50%)</div>
		…/* и так до десятого блока */
		<div class = "test10"> hsl(0, 100%, 50%)</div>
		<br>/* переводим строку */
		<div class = "test11" style = "color:white">hsl(0, 100%, 10%)</div> /* добавляем внутренний стиль для элемента (цвет текста белый) */
		…/* и так до двадцатого блока */
		<div class = "test10"> hsl(0, 100%, 100%)</div>
	</body>
</html> 

Результат нашего примера:

Рис. 49 Пример задания цвета с помощью HSL в CSS.

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

Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300°):

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Применение HSLA в CSS</title>
<style> 
div {
display : inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
width : 60px; /* устанавливаем ширину для всех <div> элементов */
height : 60px; /* устанавливаем высоту для всех <div> элементов */
}
.test1  {
background-color :  hsla(300, 100%, 50%,.1); /* фиолетовый цвет со 100% насыщенностью и 50% осветлённостью с добавлением альфа-канала, который задает уровень прозрачности */
}
…/* и так до десятого блока с шагом 0.1 */
.test10  {
background-color :  hsla(300, 100%, 50%, 1); /* альфа-канал полностью непрозрачный */
}
</style>
</head>
	<body>
		<div class = "test1">hsla(300, 100%, 50%,.1)</div>
		…
		<div class = "test10">hsla(300, 100%, 50%, 1)</div>
	</body>
</html> 

Результат нашего примера:

Рис. 50 Пример задания цвета с помощью HSLA в CSS.