background-blend-mode | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Примечание
- Спецификация
- Браузеры
Определяет режим наложения фонового изображения на фоновый цвет или другие фоновые изображения. Допустимо указывать несколько значений через запятую, при этом они будут применяться к фоновым изображениям, перечисленных в background-image, в том же порядке.
Значение по умолчанию | normal |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | Нет |
Синтаксис
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Обозначения
Описание | ||
---|---|---|
<тип> | Указывает тип значения.![]() | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз.![]() | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
Значения, в целом, совпадают с режимами графических редакторов. Ниже описания взяты из руководства Adobe Photoshop.
При описании визуальных эффектов режима наложения используются следующие термины, обозначающие цвета.
- Основной цвет — исходный цвет в изображении.
- Совмещённый цвет — цвет накладываемого изображения.
- Результирующий цвет — цвет, полученный в результате наложения.
- normal
- Обычный. Не используется смешивание цветов. Режим по умолчанию.
- multiply
- Умножение. В этом режиме значение основного цвета умножается на значение совмещённого цвета. Результирующий цвет всегда представляет собой более тёмный цвет. В результате умножения значения любого цвета на значение чёрного цвета вырабатывается чёрный цвет.
В результате умножения значения любого цвета на значение белого цвета цвет остаётся неизменным.
- screen
- Осветление. В этом режиме перемножаются обратные значения основного и совмещённого цвета. В качестве результирующего цвета всегда применяется более светлый цвет. При осветлении с применением чёрного цвета, цвет остаётся неизменным. При перекрытии с применением белого цвета, цвет становится белым. Полученный эффект аналогичен наложению друг на друга изображений многочисленных фотографических слайдов с помощью проектора.
- overlay
- Перекрытие. В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и тёмные участки основного цвета. Базовый цвет не заменяется, а смешивается с совмещённым цветом, что позволяет отразить наличие светлых или тёмных участков первоначального цвета.
- darken
- Замена тёмным. В качестве результирующего выбирается основной или совмещённый цвет, в зависимости от того, какой из них темнее.
Пиксели с цветом, более светлым по сравнению с совмещённым, заменяются, а пиксели с цветом, более тёмным по сравнению с совмещённым, остаются неизменными.
- lighten
- Замена светлым. В качестве результирующего цвета выбирается основной или совмещённый цвет, в зависимости от того, какой из них светлее. Пиксели с более тёмным цветом по сравнению с совмещённым цветом заменяются, а пиксели с более светлым цветом по сравнению с совмещённым цветом остаются неизменными.
- color-dodge
- Осветление основы. Основной цвет заменяется более ярким для отражения совмещённого цвета в результате уменьшения контраста между двумя цветами. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
- color-burn
- Затемнение основы. Основной цвет заменяется более тёмным для отражения совмещённого цвета в результате увеличения контраста между двумя цветами. Смешивание с белым цветом не приводит к появлению каких-либо изменений.
- hard-light
- Направленный свет.
В этом режиме цвета умножаются или осветляются в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения резким светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Этот эффект может применяться для добавления светлых участков к изображению. Если совмещённый цвет (источник света) является более тёмным, чем 50% серого, то изображение становится темнее, как после умножения. Этот эффект может применяться для добавления тёмных участков к изображению. Наложение чисто-чёрного или чисто-белого цвета приводит к получению чисто-чёрного или чисто-белого цвета.
- soft-light
- Рассеянный свет. В этом режиме цвета становятся более тёмными или более светлыми в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления.
Если совмещённый цвет является более тёмным, чем 50% серого, изображение становится темнее, как после затемнения. Наложение чисто-чёрного или чисто-белого цвета создаёт отчётливые, более тёмные или более светлые зоны, но чистого чёрного или белого цвета не получится.
- difference
- Разница. В этом режиме вычитается либо совмещённый цвет из основного цвета, либо основной цвет из совмещённого цвета в зависимости от того, какой цвет имеет большее значение яркости. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с чёрным цветом не влечёт за собой каких-либо изменений.
- exclusion
- Исключение. В этом режиме создается эффект, аналогичный создаваемому в режиме «Разница», но характеризующийся более низким контрастом. Смешивание с белым цветом приводит к инвертированию значений основного цвета. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
- hue
- Тон. В этом режиме создаётся результирующий цвет с яркостью и насыщенностью основного цвета и цветовым тоном совмещённого цвета.
- saturation
- Насыщенность. В этом режиме создаётся результирующий цвет с яркостью и цветовым тоном основного цвета и насыщенностью совмещённого цвета.
- color
- Цвет. Создаётся результирующий цвет с яркостью основного цвета и с цветовым тоном и насыщенностью совмещённого цвета. Этот режим сохраняет уровни серого в изображении и может применяться для раскрашивания монохромных изображений и добавления оттенков к цветным изображениям.
- luminosity
- Яркость. В этом режиме создаётся результирующий цвет с цветовым тоном и насыщенностью основного цвета и яркостью совмещённого цвета. Этот режим создаёт эффект инверсии цвета.
Песочница
normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity
div { min-height: 300px; background: url(image/animate-bg2.png) 400px center no-repeat, url(image/animate-bg1.jpg) 0 -200px no-repeat; background-blend-mode: {{ playgroundValue }}; }
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background-blend-mode</title> <style> body { background: /* Параметры фонового изображения */ url(/example/image/aquaria.jpg) center / cover no-repeat fixed, linear-gradient(#00A8DE, #FFF) fixed; /* Градиент */ background-blend-mode: luminosity; /* Режим наложения */ } </style> </head> <body> </body> </html>В данном примере к <body> добавляется фоновое изображение, растянутое на всё окно браузера, плюс вертикальный линейный градиент от голубого до белого цвета. В результате смешивания фонового изображения и градиента получается однотонное изображение, которое постепенно становится чёрно-белым. Результат примера продемонстрирован на рис. 1.
Рис. 1. Вид фона
Объектная модель
Объект. style.backgroundBlendMode
Примечание
Safari до версии 10 и iOS Safari до версии 10.3 не поддерживают значения hue, saturation, color и luminosity.
Спецификация
Спецификация | Статус |
---|---|
Compositing and Blending Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
35 | 22 | 7.1 | 10.1 | 30 |
62 | 8 | 10.3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Цвет и фон
См. также
- mix-blend-mode
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.02.2020
Редакторы: Влад Мержевич
blend-mode | HTML и CSS с примерами кода
normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosity
Конечный цвет — это верхний цвет, независимо от того, что представляет собой нижний цвет. Эффект подобен двум непрозрачным кускам бумаги, перекрывающимся друг над другом.
Конечный цвет — результат умножения верхнего и нижнего цветов. Черный слой приводит к черному окончательному слою, а белый слой не приводит к изменению. Эффект подобен двум изображениям, нанесенным на прозрачную пленку.
Конечный цвет является результатом инверсии цветов, их умножения и инвертирования этого значения. Черный слой не приводит к изменению, а белый слой приводит к белому окончательному слою. Эффект подобен двум изображениям, сияющим на экране проекции.
Конечный цвет — результат multiply
, если нижний цвет темнее или screen
, если нижний цвет светлее. Этот режим смешивания эквивалентен hard-light
, но со слоем обмена.
Конечный цвет состоит из самых темных значений каждого цветового канала.
Конечный цвет состоит из самых светлых значений каждого цветового канала.
Конечный цвет — результат деления нижнего цвета на обратный верхний цвет. Черный передний план не приводит к изменению. Передний план с обратным цветом фона приводит к полностью освещенному цвету.
Этот режим смешивания похож на screen
, но передняя часть должна быть только такой же cdtnkjq, как обратная сторона фона, чтобы создать полностью освещенный цвет.
Конечный цвет является результатом инвертирования нижнего цвета, деления значения на верхний цвет и инвертирования этого значения. Белый передний план не дает никаких изменений. Передний план с обратным цветом фона приводит к черному окончательному изображению.
Этот режим смешивания аналогичен multiply
, но переднего плана нужно только быть темным, как обратное к фону, чтобы сделать окончательное изображение черным.
Конечный цвет — результат multiply
, если верхний цвет темнее или screen
, если верхний цвет светлее. Этот режим смешивания эквивалентен overlay
, но со слоем обмена. Эффект подобен сиянию сурового прожектора на заднем плане.
Конечный цвет похож на hard-light
, но мягче. Этот режим смешивания ведет себя аналогично hard-light
. Эффект подобен сиянию рассеянного прожектора на заднем плане.
Конечный цвет — результат вычитания более темного из двух цветов из более светлого. Черный слой не действует, а белый слой инвертирует цвет другого слоя.
Конечный цвет похож на difference
, но с меньшим контрастом. Как и
difference
, черный слой не действует, а белый слой инвертирует цвет другого слоя.
Конечный цвет имеет оттенок верхнего цвета, используя насыщенность и светимость нижнего цвета.
Конечный цвет имеет насыщенность верхнего цвета, используя оттенок и светимость нижнего цвета. Чистый серый фон, без насыщения, не будет иметь никакого эффекта.
Конечный цвет имеет оттенок и насыщенность верхнего цвета, при этом используется яркость нижнего цвета. Эффект сохраняет уровни серого и может использоваться для раскрашивания переднего плана.
Конечный цвет имеет яркость верхнего цвета, используя оттенок и насыщенность нижнего цвета. Этот режим смешивания эквивалентен color
, но при этом слои меняются местами.
blackness and lightness vs sass darken lighten
Lightrun Answers был разработан, чтобы уменьшить постоянное гугление, связанное с отладкой сторонних библиотек. Он собирает ссылки на все места, на которые вы могли бы обратить внимание, выискивая опасную ошибку.
И, если вы все еще застряли в конце, мы будем рады ответить на звонок, чтобы узнать, как мы можем помочь.
См. исходную проблему GitHub
Описание проблемы
Я пытаюсь воспроизвести результаты sass затемнить
и осветлить
функции, используя функцию цвета css, однако я не получаю аналогичных результатов:
/* функция цвета */ цвет(#B6FFD4 чернота(30%)) /* #b3b3b3 */ /* дерзкое затемнение */ затемнить(#B6FFD4, 30%) /* #1dff7a */
По сути, мне нужен более сильный зеленый цвет, который я получаю, используя sass darken, но я не могу понять, как воспроизвести эти результаты. Спасибо!
Аналитика проблем
Ничего не найдено
Лучшие результаты из Интернета
sass:color
Увеличивает или уменьшает одно или несколько свойств $color на фиксированную величину. … Аргументы $saturation , $lightness , $whiteness и $blackness…
Подробнее >
Sass lighten() и darken() vs mix() с использованием черного и белого
В Sass есть функция цвета для осветлять и затемнять цвета, но они не всегда ведут себя так, как можно было бы ожидать. Использование mix() с черным…
Подробнее >
Использование lighten() и darken() в SASS — Falkus.co
Как следует из названий, при заданном цвете и процентном соотношении эти функции будут возвращать цвет соответственно светлее или темнее.
Управление цветом с помощью цветовых функций Sass — Thoughtbot
Darken & Lighten Эти две функции регулируют яркость значений HSL цвета. Sass проанализирует нашу шестнадцатеричную переменную цвета в hsl, затем…
Подробнее >
Разработчики — чернота и светлота vs sass darken lighten —
чернота и светлота vs sass darken lighten. postcss. 15 июня 2016 г. Автор: perrin4869. Я пытаюсь воспроизвести результаты…
Читать далее >
Топ связанных сообщений в СМИ
Результатов не найдено
Топ связанных вопросов StackOverflow
Результатов не найдено
Устранение неполадок Live Code
Lightrun позволяет разработчикам добавляйте журналы, метрики и моментальные снимки в работающий код — перезапуск или повторное развертывание не требуются.
Начать бесплатно
Самая популярная тема Reddit
Ничего не найдено0010
Результатов не найдено
Топ связанных твитов
Результатов не найдено
Топ связанных Dev.to Post
Результатов не найдено
Топ связанных сообщений Hashnode
Результатов не найдено
Lighten and Darken function in SASS. | by Oyekunle Oyewusi
Каскадные таблицы стилей ( CSS ) определяют внешний вид веб-приложения. CSS — это язык таблицы стилей, используемый для описания представления документа, написанного на языке разметки, таком как HTML. CSS является краеугольным камнем технологии World Wide Web, наряду с HTML и JavaScript (Википедия). CSS считается одним из самых простых и одним из самых сложных языков для веб-разработчика. Усложняется осмысленная организация CSS для больших проектов. Бэкенд-разработчики путаются, когда дело доходит до вложенного синтаксиса CSS.
Хорошая новость заключается в том, что язык препроцессоров (Sass) делает CSS проще, читаемее и удобнее для разработчиков. В Sass есть много интересных функций, наиболее полезной из которых является объявление переменных, которые можно повторно использовать в любой части вашего кода. В последнее время большинство людей, работающих с Sass, определяли все переменные в отдельном файле (общая практика). Sass 3 имеет новый синтаксис с фигурными скобками, который более удобочитаем для разработчика (Sassy-CSS = SCSS). Вы используете Node.js, вы также можете установить Sass с помощью npm, запустив. Если у вас есть проект, вы хотите добавить SASS,
Шаг 1
откройте каталог проекта в интерфейсе командной строки и выполните следующую команду:
npm init
Приведенная выше команда потребует предоставить сведения о вашем проекте, а затем сгенерировать файл package. json в ваш проект. .
Шаг 2
вы можете установить sass с помощью приведенной ниже команды.
npm install node-sass --save-dev
Шаг 3
Перейдите к package.json в вашем редакторе, добавьте SASS Compile. Синтаксис: «compile-sass» : «node-sass node-sass style.scss style.css ”
Фрагмент кода ниже:
“scripts” : {
“compile-sass”: “node-sass style.scss
style.cs10s”
}
Или вы можете добавить к команде отслеживание: это будет автоматически искать изменения при каждом сохранении файла SCSS.
«скрипты»: {
«компиляция-sass»: «node-sass style.scss style.css -w»
}
Шаг 4
Вы можете преобразовать файл SCSS в обычный файл CSS с помощью CLI. В терминале запустите следующую команду:
npm run compile:sass
Начать работу с SASS несложно, подробнее об этом можно прочитать: Sass-guide.