1. Введение в атрибут смешанного режима смешивания 2. Общие значения атрибута смешанного режима смешивания 3. Применение атрибута смешанного режима смешивания 1. Эффект приложения 2. Связанный код 4. Фон интеллектуальной адаптации текста 1 Оригинальный стиль 2. Добавить микс 3. Код реализации.
[ атрибут mix-blend-mode ] в CSS описывает, как содержимое элемента должно смешиваться с содержимым непосредственного родительского элемента элемента и фона элемента ;
Используется для установки режима смешивания между фоном и передним планом элемента; может применяться к любому элементу; может использоваться с атрибутом фонового изображения для создания множества различных визуальных эффектов;
| серийный номер | значение атрибута | Режимы смешивания и инструкции |
|---|---|---|
| 1 | режим смешивания: нормальный ; | Обычный: это свойство не применяет никакого смешивания; |
| 2 | режим смешивания: умножить ; | Умножить: элемент умножается на фон и заменяет цвет фона. Результирующий цвет всегда такой же темный, как и фон; |
| 3 | режим смешивания: наложение ; | Наложение: умножает или маскирует содержимое на основе цвета фона, в отличие от режима наложения «Жесткий свет»; |
| 4 | режим смешивания: экран ; | Экран: Умножьте фон и содержимое, затем дополните результат. В результате содержимое будет светлее цвета фона; |
| 5 | режим смешивания: затемнить ; | Darken ; при затемнении содержимого фон будет заменен содержимым, в противном случае всё останется как есть; |
| 6 | режим смешивания: осветлить ; | Осветлить: фон заменяется более светлым содержимым; |
| 7 | режим смешивания: цвет-осветление ; | Color Lighten: это свойство осветляет цвет фона, чтобы он отражал цвет содержимого; |
| 8 | режим смешивания: цвет-загар ; | Цветовое осветление: затемняет фон, чтобы отразить естественный цвет содержимого; |
| 9 | режим смешивания: жёсткий свет ; | Жесткий свет: в зависимости от цвета контента это свойство будет фильтровать или умножать его; |
| 10 | режим смешивания: мягкий свет ; | Мягкий свет: в зависимости от цвета контента он затемняется или осветляется; |
| 11 | режим смешивания: разница ; | Разница : это позволит вычесть более темный из двух цветов из самого светлого цвета; |
| 12 | режим смешивания: исключение ; | Исключить : аналогично «Разнице», но с меньшим контрастом; |
| 13 | режим смешивания: оттенок ; | Hue : создает цвет путем объединения оттенка содержимого с насыщенностью и яркостью фона; |
| 14 | режим смешивания: насыщенность ; | Насыщенность : создает цвет за счет насыщенности содержимого, оттенка и яркости фона; |
| 15 | режим смешивания: цвет ; | Смешение цветов: создавайте цвета на основе оттенка и насыщенности содержимого, а также яркости фона; |
| 16 | режим смешивания: яркость ; | Яркость : создает цвета на основе яркости содержимого, а также оттенка и насыщенности фона. Это противоположность свойства цвета; |
нормальный: этот атрибут не применяет никакого смешивания.multiply: элемент умножается на фон и заменяет цвет фона. Результирующий цвет всегда такой же темный, как фон.экран: умножает фон, а затем содержимое дополняет результат. в результате получается контент, который ярче, чем фоновый цвет.overlay: умножает или экранирует контент в зависимости от цвета фона. Это обратный режиму наложения жесткого света.darken: фон заменяется контентом, на котором находится контент. темнее, в противном случае он остается таким, каким был.lighten: фон заменяется содержимым, содержимое которого светлее.color-dodge: этот атрибут делает цвет фона ярче, чтобы отразить цвет содержимого.color-burn: затемняет фон для отражения естественного цвета контента.hard-light: в зависимости от цвета контента этот атрибут будет экранировать или умножать его.soft-light: в зависимости от цвета контента он будет затемняться или осветляться.difference: это вычитает более темный из двух цвета из самого светлого цвета. exclusion: аналогично разнице, но с более низким контрастом. hue: создает цвет с оттенком содержимого в сочетании с насыщенностью и яркостью фона. насыщенность: создает цвет с насыщенностью содержимого в сочетании с оттенок и яркость фона.color: создает цвет с оттенком и насыщенностью содержимого, а также яркостью фона.luminosity: создает цвет с яркостью содержимого, оттенком и насыщенность фона. Это инверсия атрибута цвета.
Щелчок дисплея эффекта
Применение атрибута mix-blend-mode
<!DOCTYPE html>
<html lang="ru">
<голова>
<мета-кодировка="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>Применение атрибута Mix-Blend-Mode</title>
<стиль>
* {
маржа: 0;
заполнение: 0;
}
.контейнер {
/* Определить переменные */
--mix-blend-mode: нормальный;
положение: относительное;
ширина: 300 пикселей;
высота: 400 пикселей;
поле: 60 пикселей;
отступ: 20 пикселей;
box-shadow: 0 0 6px 1px #999;
радиус границы: 6 пикселей;
цвет каретки: прозрачный;
}
ч3,
ч4 {
нижнее поле: 10 пикселей;
}
.info-box {
ширина: 100%;
высота: 24 пикселей;
высота строки: 24 пикселей;
}
.круг {
позиция: абсолютная;
ширина: 200 пикселей;
высота: 200 пикселей;
радиус границы: 50%;
режим смешивания-смешивания: var (--mix-blend-mode);
}
.red-box {
слева: 70 пикселей;
верх: 160 пикселей;
цвет фона: красный;
}
.green-box {
слева: 30 пикселей;
верх: 220 пикселей;
цвет фона: светло-зеленый;
}
.blue-box {
слева: 110 пикселей;
верх: 220 пикселей;
цвет фона: синий;
}
</стиль>
</голова>
<тело>
<div class="контейнер">
<h3>Применение атрибута Mix-Blend-Mode</h3>
<h4 class="value-box"></h4>
<div class="info-box"></div>
<div class="circle red-box"></div>
<div class="circle green-box"></div>
<div class="circle blue-box"></div>
</div>
</тело>
<скрипт>
// Получаем элементы varContainer = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
//Список значений и описание атрибута mix-blend-mode;
значения var = [
{
идентификатор: 1,
имя: «нормальный»,
значение: «нормальное»,
информация: «Это свойство не применяет смешивания»;
},
{
идентификатор: 2,
название: «умножить»,
значение: «умножить»,
информация: "Элемент умножается на фон и заменяет цвет фона. Результирующий цвет всегда такой же темный, как и фон;"
},
{
идентификатор: 3,
имя: "оверлей",
значение: «наложение»,
информация: «Умножить или замаскировать содержимое на основе цвета фона; это противоположность режиму наложения жесткого света;»
},
{
идентификатор: 4,
имя: "экран",
значение: «экран»,
info: «Умножьте фон и содержимое, а затем дополните результат. В результате содержимое будет светлее цвета фона;»
},
{
идентификатор: 5,
название: «Тёмный»,
значение: «темнеть»,
info: "При затемнении содержимого фон будет заменен содержимым, в противном случае всё останется как есть";
},
{
идентификатор: 6,
название: «Светлее»,
значение: «осветлить»,
info: "Фон заменяется более светлым содержимым";
},
{
идентификатор: 7,
название: «Цвет тускнеет»,
значение: "осветление цвета",
информация: «Это свойство осветляет цвет фона, чтобы он отражал цвет содержимого;»
},
{
идентификатор: 8,
название: «Цвет тускнеет»,
значение: "цвет-загар",
info: «Это затемняет фон, чтобы отразить естественный цвет контента»;
},
{
идентификатор: 9,
название: «жесткий свет»,
значение: «жесткий свет»,
информация: «Это свойство будет фильтровать или умножать содержимое в зависимости от его цвета».
},
{
идентификатор: 10,
название: «мягкий свет»,
значение: «мягкий свет»,
info: «В зависимости от цвета содержимого, оно будет затемнено или осветлено»;
},
{
идентификатор: 11,
название: «Разница»,
значение: «разница»,
информация: «Это вычтет более темный из двух цветов из самого светлого цвета»;
}, {
идентификатор: 12,
имя: «исключить»,
значение: «исключение»,
info: «Похоже на разницу, но с меньшим контрастом»;
},
{
идентификатор: 13,
название: "Хюэ",
значение: «оттенок»,
info: «Создавайте цвет, комбинируя оттенок контента с насыщенностью и яркостью фона;»
},
{
идентификатор: 14,
имя: «насыщенность»,
значение: «насыщенность»,
информация: «Создать цвет на основе насыщенности содержимого, оттенка и яркости фона»;
},
{
идентификатор: 15,
название: «Цветовой микс»,
значение: «цвет»,
информация: «Создавайте цвета на основе оттенка и насыщенности содержимого, а также яркости фона»;
},
{
идентификатор: 16,
имя: "яркость",
значение: «яркость»,
info: "Создает цвет на основе яркости содержимого, а также оттенка и насыщенности фона. Это противоположность свойству цвета;"
}
]
изменить режим();
//Изменить режим смешивания
функция изменения режима() {
пусть индекс = 0;
модАттр (индекс);
let timerId = setInterval(() => {
если (индекс >= значения.длина) {
ClearInterval (timerId);
возвращаться;
}
индекс++;
модАттр (индекс)
}, 3000)
}
функция modAttr(индекс) {
//Устанавливаем значение свойства mix-blend-modeContainer.style.setProperty('--mix-blend-mode',values[index].value);
valueBox.innerHTML = `mix-blend-mode: ${values[index].value};`;
infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`
}
</скрипт>
</html>Часто текст необходимо отображать рядом с изображением. Если цвета текста и изображения близки, читаемость будет серьезно нарушена;
Как сделать так, чтобы текст автоматически подстраивался под фон?
Вы можете использовать атрибут mix-blend-mode, чтобы установить цветовую смесь текста и фона для достижения эффекта адаптации текста к фону;
Цвет текста белый, читаемость на некоторых изображениях плохая;
.grid-item > h3 {
цвет: RGB(255, 255, 255);
...
}
Установите атрибут mix-blend-mode на разницу ;
Начальное значение цвета текста — белое, но для получения нового значения цвета будет рассчитана разница со значением цвета каждого пикселя, соответствующего фону родительского элемента;
Значение цвета текста — значение цвета фона = значение смешанного пикселя (каждый пиксель);
Например: цвет текста (255, 255, 255), цвет фона (255, 255, 255), расчетное значение (0, 0, 0), отображается черным цветом;
.grid-item>h3 {
цвет: RGB(255, 255, 255);
/* Устанавливаем режим смешивания — вычисляем разницу */
режим смешивания: разница;
...
}Примечание. Режим наложения различий здесь применяется к тексту;
<!DOCTYPE html>
<html lang="ru">
<голова>
<мета-кодировка="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>Текст разумно адаптируется к фону</title>
<стиль>
* {
маржа: 0;
заполнение: 0;
}
.контейнер {
дисплей: гибкий;
ширина: 100vw;
высота: 60вх;
оправдание-содержание: центр;
выровнять-элементы: по центру;
}
.grid-контейнер {
дисплей: сетка;
столбцы шаблона сетки: 400 пикселей 400 пикселей 400 пикселей;
строки шаблона сетки: 200 пикселей 200 пикселей;
разрыв: 10 пикселей;
}
.grid-item {
фоновый повтор: без повтора;
размер фона: обложка;
радиус границы: 6 пикселей;
box-shadow: 0 0 6px 1px #999;
}
.grid-item>h3 {
цвет: RGB(255, 255, 255);
размер шрифта: 36 пикселей;
/* Устанавливаем режим смешивания — вычисляем разницу */
режим смешивания: разница;
}
.grid-item:nth-child(1) {
/* фоновое изображение: url("D:\test\zyl-img\bg_1.jpg" */
цвет фона: красный
}
.grid-item:nth-child(2) {
/* фоновое изображение: url("D:\test\zyl-img\bg_2.jpg" */
цвет фона: фиолетовый;
}
.grid-item:nth-child(3) {
/* фоновое изображение: url("D:\test\zyl-img\bg_3.jpg" */
цвет фона: желтый;
}
.grid-item:nth-child(4) {
/* фоновое изображение: url("D:\test\zyl-img\bg_4.jpg" */
цвет фона: зеленый;
}
.grid-item:nth-child(5) {
/* фоновое изображение: url("D:\test\zyl-img\bg_5.jpg" */
цвет фона: бирюзовый;
}
.grid-item:nth-child(6) {
/* фоновое изображение: url("D:\test\zyl-img\bg_6.jpg" */
цвет фона: синий;
}
</стиль>
</голова>
<тело>
<div class="контейнер">
<div class="grid-container">
<div class="grid-item">
<h3>Применение атрибута Mix-Blend-Mode</h3>
</div>
<div class="grid-item">
<h3>Применение атрибута Mix-Blend-Mode</h3>
</div>
<div class="grid-item">
<h3>Применение атрибута Mix-Blend-Mode</h3>
</div>
<div class="grid-item">
<h3>Применение атрибута Mix-Blend-Mode</h3>
</div>
<div class="grid-item">
<h3>Применение атрибута Mix-Blend-Mode</h3>
</div>
<div class="grid-item">
<h3>Применение атрибута Mix-Blend-Mode</h3>
</div>
</div>
</div>
</тело>
</html>На этом завершается статья о подробном объяснении атрибута mix-blend-mode в CSS (установка режима смешивания элемента). Для получения дополнительной информации об атрибуте css mix-blend-mode обратитесь к предыдущим статьям на сайте downcodes.com или на сайте downcodes.com. Продолжайте просматривать соответствующие статьи ниже, и я надеюсь, что вы поддержите downcodes.com в будущем!