Как сделать картинку темнее css

Как затемнить изображение на css?

Как слегка затемнить изображение как в примере? И реально ли так сделать на CSS?

• Вопрос задан более трёх лет назад
• 48675 просмотров

Комментировать

Решения вопроса 1

Алексей Уколов @alexey-m-ukolov Куратор тега CSS

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Ответы на вопрос 4

HTML CSS JS

Самый поддерживаемый способ — наложить поверх блок с черным фоном и необходимой прозрачностью, все остальные способы не такие кроссбраузерные или полезные, например использование inset-теней до сих пор в некоторых браузерах вызывает сильные тормоза. Если вы заботитесь о своих посетителях, а баннер не будет меняться каждый день, делайте такие эффекты сразу в фотошоп, единоразово или создав шаблон (мокап) с этой подложкой на будущее.

Ответ написан более трёх лет назад

Нравится 4 5 комментариев

Я бы картинку положил поверх черного дива и сделал её прозрачность.
В браузерах, где вдруг не работает opacity (хотя rgba() и работает почти везде), хотя бы не было черного дива на странице.

Режимы наложения слоев в Web с помощью CSS

В современном веб-строительстве одна из основных возникающих проблем между верстальщиком и дизайнером – это слои в Photoshop с разными режимами смешивания. Браузер умеет выводить в стандартном режиме смешивания “Normal” (применяется, по умолчанию, в CSS – blend-mode: normal). И это является основной проблемой, т.к. чтобы вырезать правильно изображение из макета с наложенными на нее слоями в разных режимах смешивания приходится применять невообразимые уловки, а в отдельных случаях это не представляется возможным. И это уже начинает уходить в прошлое! Режимы смешивания, которые встречаются в Photoshop теперь доступны в CSS через свойства blend-mode и background-blend-mode. Значения этих свойств точно такие же, как любимом графическом редакторе: lighten, multiply, hard-light и так далее.

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

Речь пойдёт о реализации спецификации «Compositing and Blending Level 1» в современных браузерах.

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

1) Фотоэффекты, такие как обесцвечивание картинки, сепия, наложение цвета. Например, достаточно будет использовать только одну цветную картинку, чтобы получить плавную анимацию от обесцвеченной к цветной при наведении:

Не все фотошопные режимы смешивания доступны нам в CSS, а только multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference и exclusion. Для работы этого вполне должно хватить.

Живые примеры на fiddle. Кликните по каждой из картинок и понаводите на них мышью. Все это сделано на CSS

2) Часто дизайнеры ленятся вырезать фон из картинки и используют наложение картинки без прозрачности на слой так, что фоновый чёрный/белый цвет будет в данном режиме преобразуются в прозрачный (режим screen/multiply):

(на картинке внизу показал кусочек накладываемого изображения «как есть»)

3) Можно использовать технологию для реализации эффектов с текстом, например, в логотипах:

Список режимов

Для примера будем накладывать тигра на такую картинку в разных режимах:

Режим	Пример	Описание режима
normal		Цвет поверх цвета без всяких эффектов.
multiply		Игнорирует белый цвет, остальное затемняет. Как будто наложить два слайда друг на друга. Светлые оттенки остаются практически невидимы, а тёмные подчёркиваются.
screen		Игнорирует чёрный цвет, делает остальные цвета светлее. Представьте два проектора светящие на изображение. Темнее изображению не стать, а наоборот, светлые тона проявляются лучше.
overlay		Игнорирует обычные тона, делая светлые стороны изображения ярче, тёмные, темнее. Другими словами, усиливает контраст.
darken		Удаляет светлые части фото
lighten		Затемняет темные пиксели более светлыми.
color-dodge		Действие режима похоже на Screen, но заметно сильнее в светлых областях за счет проявления более насыщенных и контрастных цветов нижнего слоя.
color-burn		Затемняет яркость, значительно повышает контраст изображения и не влияет на белые пикселы в изображении.
hard-light		Использует тот же метод, что и режим Overlay, но эффект более сильный. Если верхний слой светлее 50% серого, то верхний слой осветяется через Screen, а если темнее – то затемяется через Multiply. Если верхний слой на 50% серый – эффекта не будет.
soft-light		Если верхний цвет светлее, нижний цвет становиться более светлым; если темнее – нижний цвет становится более темным.
difference		Представляет идентичные пиксели как черные, похожие – как темно-серые, а противоположные – как инвертированные. Если верхний слой черный – изменений не будет.
exclusion		Похоже на режим Difference, однако обеспечивает меньшую контрастность. Наложение на черный цвет не приводит к каким-либо изменениям, а наложение на белые пиксели – к инверсии сравниваемых значений, что приводит к их отображении серым цветом.
hue*		Комбинирует свечение (Luminance) и насыщенность (Saturation) нижнего слоя с цветовым тоном (Hue) верхнего.
saturation*		Комбинирует свечение (Luminance) и цветовой тон (Hue) нижнего слоя с насыщенностью (Saturation) верхнего слоя.
color*		Комбинирует тон (Hue) и насыщенность (Saturation) верхнего слоя и свечение (Luminance) нижнего слоя.
luminosity*		Противоположный режиму Color. Комбинирует Luminance (cвечение) верхнего слоя и Hue (цвета) и Saturation (колебание цвета) нижнего слоя.

Технологии применения и поддержка браузерами

По спецификации, применять режимы наложения можно в четырёх случаях:

1) Для фонового изображения в CSS

background-blend-mode: ;

Поддерживают: Chrome 35+, Firefox 30+ beta (войдёт ли в релиз этот функционал, ещё вопрос, т. к. скорее всего уже переносили «приземление» этого функционала).

2) Для HTML-элементов

mix-blend-mode: ;

Поддерживают: пока нет, но активно идёт разработка по реализации.

Расчёт цвета: динамическое цветовое оформление на чистом CSS

Вы знаете, что можно динамически менять цветовое оформление страницы без JavaScript или CSS-препроцессоров? Это возможно благодаря магии кастомных свойств CSS, цветовой модели HSL и функции calc() . Они работают с любым фреймворком и веб-технологией без лишних телодвижений. Да здравствует CSS!

• Что нам дают CSS-препроцессоры
• Настраиваем окружение
• Корректируем значения с помощью HSL
• Получаем комплементарные цвета и триадические сочетания
• Воспроизводим mix()
• Создаём функцию color-contrast()
• Заключение

В демо на CodePen можно выбрать основной и дополнительный цвета и создать завершённую систему. Это реализовано на ванильном CSS. JavaScript здесь используется только для динамического изменения цветов.

Что нам дают CSS-препроцессоры

Когда заходит речь о системах цветов, на ум приходят несколько полезных функций Sass . Вот наиболее распространённые:

• lighten , darken() ;
• complement() ;
• hue() ;
• mix() ;
• contrast-color() .

Некоторые из этих трансформаций можно воссоздать с помощью CSS-фильтров. Например, lighten и darken — это всего лишь значение lightness из HSL. Трансформация hue — это H из HSL. Дополнительные цвета можно рассчитывать с помощью инверсии hue , для этого достаточно прибавить к или отнять 180 от соответствующего значения. Это переносит значение hue на противоположную сторону цветового круга. Функция calc() и кастомные свойства позволяют трансформировать цвета с помощью одного значения.

Ниже рассказывается, как с помощью кастомных свойств CSS и функции calc() воссоздавать lighten() darken() , comlement() и даже триадические сочетания. Также вы узнаете лайфхак, который позволяет делать крутые штуки с color-contrast() . Эти возможности реализованы во всех современных браузерах. Но для Internet Explorer 11 и ниже придётся использовать препроцессор.

Настраиваем окружение

В первую очередь нужно разложить цвета на значения hue, saturation и lightness (тон, насыщенность и светлота) цветовой модели HSL. Можно также использовать значение альфа — прозрачность. Например, переменная для цвета red выглядит так:

--colorPrimary: hsl(0, 100%, 50%); 

Объявляем пользовательские свойства со значениями HSL.

--colorPrimary-h: 0; --colorPrimary-s: 100%; --colorPrimary-l: 50%; --colorPrimary: var(--colorPrimary-h), var(--colorPrimary-s), --colorPrimary-l); 

Корректируем значения с помощью HSL

Теперь значения из примера выше можно использовать для корректирования цветов. Начать стоит с воссоздания функций lighten и darken .

Определим, на сколько светлее или темнее должен стать цвет. Эти значения сохраним в дополнительных кастомных свойствах.

--lighten-percentage: 20%; --darken-precentage: 15%; 

После определения трансформаций можно записать новые значения. Показатель lightness можно вычислить так.

calc(var(--colorPrimary-l) + var(--lighten-percentage)) 

Всё вместе выглядит так.

--colorPrimary--light: var(--colorPrimary-h), var(--colorPrimary-s), calc(var(--colorPrimary-l) + var(--lighten-percentage))); 

Код может показаться сложным. Но здесь только используются базовые значения hue и saturation и уточняется значение lightness.

Чтобы реализовать функцию darken , можно вычесть значение lightness или прибавить его, если вам нужны отрицательные значения.

--colorPrimary--dark: var(--colorPrimary-h), var(--colorPrimary-s), calc(var(--colorPrimary-l) - var(--darken-percentage))); 

Получаем комплементарные цвета и триадические сочетания

Цветовой круг HSL

Чтобы получать комплиментарные или триадические оттенки, нужно уточнять значение hue базового цвета. Можно создать отдельные переменные или использовать шорткаты и помнить, что цветовой круг HSL изменяется по часовой стрелке от нуля до 360 градусов (см. иллюстрацию выше). То есть чтобы получить комплементарный оттенок, необходимо отнять или прибавить к значению 180 градусов.

Получаем комплементарный оттенок

--colorPrimary--complement: calc(var(--colorPrimary-h) + 180), var(--colorPrimary-s), var(--colorPrimary-l)); 

Чтобы получить триадическое сочетание, нужно разделить цветовой круг на три части. То есть оттенки можно получить, добавив к базовому значению 120 и 240 соответственно.

--colorPrimary--triad1: calc(var(--colorPrimary-h) + 120), var(--colorPrimary-s), var(--colorPrimary-l)); --colorPrimary--triad2: calc(var(--colorPrimary-h) + 240), var(--colorPrimary-s), var(--colorPrimary-l)); 

Воспроизводим mix()

Режим смешивания mix() более сложный по сравнению с lighten() и darken() . Но его можно воспроизвести с помощью HSL-вычислений.

Чтобы смешать цвета, надо определить их.

--color-1-h: 0; --color-1-s: 100%; --color-1-l: 50%; --color-2-h: 50; --color-2-s: 80%; --color-2-l: 50%; 

Затем надо получить средние значения.

--avg-1-2-h: calc((var(--color-1-h) + var(--color-2-h)) / 2); --avg-1-2-s: calc((var(--color-1-s) + var(--color-2-s)) / 2); --avg-1-2-l: calc((var(--color-1-l) + var(--color-2-l)) / 2); 

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

--mixed-color: hsl(var(--avg-1-2-h), var(--avg-1-2-s), var(--avg-1-2-l)); 

Создаём функцию color-contrast()

Ещё одна ключевая возможность CSS-препроцессоров — использование логических значений. Они позволяют вычислять доступные цвета с помощью функции color-contrast() .

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

Наглядная демонстрация возможностей системы цветов

Сначала определяем порог контрастности.

--contrastThreshold: 60%; 

Затем проверяем, не превышает ли значение lightness порог контрастности. Для этого используем демонстрационную версию системы цветов. Если порог выше яркости основного цвета, возвращается значение light, так как мы умножаем значение lightness на — 100. Например, значение lightness составляет 40, а contrastThreshhold 60. Разница равна — 20. Умножаем это значение на — 100 и получаем 2000. Это белый цвет, так как при значении lightness 100 и выше всегда получается белый.

Когда значение lightness выше contrastThreshhold , получаем обратную ситуацию. Если lightness 90, а contrastThreshold 60, разница составляет 30. Умножаем это значение на — 100 и получаем -3000. Это чёрный цвет, так как lightness ниже нуля.

Возвращаем lightness как L в HSL. Это выглядит так.

.primary  background: var(--colorPrimary); --switch: calc((var(--colorPrimary-l) - var(--contrastThreshold)) * -100); color: hsl(0, 0%, var(--switch)); > 

Поскольку HSL — это то, как компьютер, а не пользователь понимает lightness, этот инструмент не идеальный. То есть у кастомных свойств и функции calc() есть недостатки, как у любого другого инструмента.

Заключение

В статье рассмотрели удобные способы работы с кастомными свойствами и функцией calc() . Если у вас есть вопросы или дополнения, пишите их в комментариях.

Адаптированный перевод статьи Calculating Color: Dynamic Color Theming with Pure CSS by Una Kravets.

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

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

background: значение1 значение 2 . значениеN; 

Далее приведем реальный пример:

background: #000000 url("img.jpg") no-repeat left bottom; 

Рассмотрим специальные свойства:

1. background-attachment
2. background-blend-mode
3. background-clip
4. background-color
5. background-image
6. background-origin
7. background-position
8. background-repeat
9. background-size

Свойство background-color для установки фонового цвета

Для обозначения фонового цвета элемента используется свойство background-color . По умолчанию все элементы имеют прозрачный фон. Рассмотрим синтаксис:

background-color: цвет | transparent; 

Значение transparent устанавливает прозрачный фон. Под понятием «цвет» может быть запись цвета в допустимом формате для CSS. Допустимыми форматами являются: шестнадцатеричный код, название цвета, RGB, RGBA, HSL, HSLA. Далее пример, где используется три формата записи черного цвета:

div background-color: #000;
> 
div background-color: rgb(0, 0, 0);
>
div background-color: black;
> 

Свойство background-image для установки фонового изображения

Свойство background-image используется для установки фонового изображения. Позволительно устанавливать несколько изображений фона, перечисляя их через запятую. Если установлен цвет фона при помощи свойства background-color , то он (цвет) будет отображаться до тех пор, пока загружается фоновое изображение или в случае его недоступности. Рассмотрим синтаксис:

background-image: url|none; 

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

1. url – URL-адрес изображения. Чтобы указать несколько изображений, разделите URL-адреса запятой;
2. none – фоновое изображение не будет отображаться. Оно по умолчанию;
3. linear-gradient() – устанавливает линейный градиент в качестве фона. Определите как минимум два цвета (сверху вниз);
4. radial-gradient() – устанавливает радиальный градиент в качестве фонового изображения. Определите как минимум два цвета (от центра до краев);
5. repeating-linear-gradient() – повторяет линейный градиент;
6. repeating-radial-gradient() – повторяет радиальный градиент.

body background-image: url("bg.jpg");
> 

Свойство background-attachment устанавливает прокрутку фона

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

background-attachment: fixed | local | scroll | initial | inherit; 

Как видно из вышеприведенного кода, данное свойство имеет пять значений. Что они означают:

1. scroll – фоновое изображение будет прокручиваться вместе со страницей. Оно установлено по умолчанию.
2. fixed – фоновое изображение не будет прокручиваться вместе со страницей.
3. local – фоновое изображение будет прокручиваться вместе с содержимым элемента.
4. initial – устанавливается значение по умолчанию.
5. inherit – наследует значение свойства родителя.

 
Какой-то текста 

body background-image: url("bg.png"); /* Путь к изображению, которое используется для фона*/ 
background-attachment: fixed; /* Фон прокручиваться не будет */
> 

Свойство background-blend-mode определяет режим наложения фонового изображения

Определяет, как будет накладываться одно фоновое изображение, на другое или на фоновый цвет. То есть, первым задается какой-то фон, при помощи свойства background-image , вторым задается фоновое изображение, для которого мы определяем стиль наложения. Позволительно указывать несколько фоновых изображений, т.е. больше двух при помощи background-image и в background-blend-mode использовать ряд значений, перечисленных через запятую. Стоит обратить внимание на версии браузеров, с которых начинается поддержка свойства background-blend-mode , например, Internet Explorer не поддерживает его вовсе. Рассмотрим синтаксис:

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

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

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 – Яркость.

Далее пример использования свойства:

div < 
width: 500px; 
height: 500px; 
background-image: url("bg.jpg"), url("superimposed.png"); 
background-blend-mode: darken;
> 

Свойство background-clip определяет отображение фона под границами

Фон может отображаться под границами, внутри их или внутри контента. Чтобы это реализовать, необходимо использовать свойство background-clip . Как ранее было обозначено, оно принимает три значения:

1. border-box – фон будет отображаться под рамкой;
2. padding-box – фон будет отображаться внутри рамки;
3. content-box – фон будет отображаться внутри контента.

Синтаксис свойства background-clip :

background-clip: [border-box |padding-box | content-box]; 

Далее рассмотрим наглядный пример использования свойства background-clip :

.clip background: #f1f1f1; 
border: 20px dotted #000000; 
background-clip: border-box; 
padding: 10px; 
height: 50px;
> 

Свойство background-origin для позиционирования фона

С помощью свойства background-origin можно позиционировать фон, при этом свойство background-attachment не должно иметь значение fixed . Значения, которые принимает background-origin :

1. border-box – позиционирование фона осуществляется относительно границы;
2. padding-box – позиционирование фона осуществляется относительно края элемента, при чем толщина границы учитывается;
3. content-box – позиционирование фона осуществляется относительно содержимого элемента;

Синтаксис свойства background-origin :

background-origin: [border-box |padding-box | content-box]; 

.origin background: url("img.jpg") no-repeat; 
background-origin: content-box; 
border: 10px solid #000; 
padding: 10px; 
height: 100px;
> 

Свойство background-position для определения начального положения фона

С помощью свойства background-position достаточно просто устанавливается начальное положение фона. Это свойство имеет два значения, которые могут быть заданы ключевым словом, в процентах или в иных значениях допустимых в CSS. Первое значение определяет положение по горизонтали ( left , center , right ), второе – по вертикали ( top , center , bottom ). Через запятую можно указывать значения для нескольких фонов. Синтаксис свойства background-position следующий:

background-position: значение1 значение2; 

При указании одного ключевого слова, второе будет равно center. Комбинации ключевых слов могут быть следующими:

1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom

body background-image: url(bg.jpg); 
background-position: 50% 50%;
> 

Свойство background-repeat устанавливает повторение фона

Устанавливает, как будет повторяться фон, установленный при помощи свойства background-image . Повторение может быть по вертикали, по горизонтали или сразу в обе стороны. Допустимы перечисления через запятую, чтобы задать для нескольких изображений. Синтаксис:

background-repeat: значение; 

Свойство background-repeat принимает 6 значений:

1. repeat – Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не помещается. Это по умолчанию;
2. repeat-x – Фоновое изображение повторяется только по горизонтали;
3. repeat-y – Фоновое изображение повторяется только по вертикали;
4. no-repeat – Фоновое изображение не повторяется. Изображение будет показано только один раз;
5. space – Фоновое изображение повторяется в максимально возможной степени без отсечения. При необходимости добавляются свободные пространства между изображениями;
6. round – Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пропусков);

body < 
background-image: url(bg.jpg); 
background-repeat: repeat; 
> 

Свойство background-size определяет размер фонового изображения

Для установки размера фонового изображения используется свойство background-size . Оно может принимать как два, так и одно значение. Первое значение указывается для ширины, второе для высоты. Если указано только одно значение, то второе значение (высота) принимает значение auto . Синтаксис:

background-size: значение1 значение2; 

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

1. cover – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, ширина или высота равнялась размерам блока;
2. contain – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, и изображение полностью поместилось в блок;
3. auto – например, если первое значение равно 200px, а второе auto, то высота изображения будет вычисляться автоматически с сохранением пропорций.

div background: url(bg.jpg); 
background-size: cover; 
> 

Заключение

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