Как создать прозрачное наложение цвета с эффектом смешивания текстур с помощью CSS и JavaScript? ⇐ CSS

[Anonymous]

Я работаю над проектом, в котором мне нужно динамически применять наложение прозрачного цвета к изображению, содержащему тонкую текстуру. Цель состоит в том, чтобы смешать выбранный цвет с текстурой изображения, подобно тому, как цвета краски отображаются на текстурированной поверхности.
Функциональность включает в себя:
Отображение изображения (например, текстурированной стены или образца краски).
Разрешение пользователям выбирать цвет из палитры.
Динамическое применение выбранного цвета в виде полупрозрачного наложения поверх изображения. изображение с сохранением видимой текстуры под цветом.
Лучший результат, который я получил:
[img]https://i.sstatic. net/kZaNFvpb.png[/img]

Чего хотелось бы достичь:
[img]https:/ /i.sstatic.net/Oly5m6q1.png[/img]

Я пробовал использовать следующее:
псевдоэлементы CSS с ::after для наложения.
background-blend -режим: умножение; чтобы объединить цвет наложения с текстурой.
JavaScript для динамической установки цвета наложения с использованием встроенных стилей и значения rgba().
Вот пример моего текущего CSS для наложение:

Код: Выделить всё

.template-image-container {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}

.template-image-container img {
display: block;
width: 100%;
height: auto;
}

.template-image-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent; /* Default state is transparent */
background-blend-mode: multiply;
pointer-events: none;
z-index: 1;
transition: background-color 0.3s ease;
}

.template-image-container[data-color-overlay="true"]::after {
background-color: var(--overlay-color, transparent);
}

Я также использую JavaScript для динамического обновления цвета наложения:

Код: Выделить всё

function applyOverlayColor(colorCode) {
const imageContainer = document.getElementById("pattern-image");

if (colorCode) {
const transparentColor = hexToRgba(colorCode, 0.5); // Adjust transparency
imageContainer.style.setProperty("--overlay-color", transparentColor);
imageContainer.setAttribute("data-color-overlay", "true"); // Enable overlay
} else {
imageContainer.style.setProperty("--overlay-color", "transparent");
imageContainer.removeAttribute("data-color-overlay"); // Disable overlay
}
}

function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

Проблема:
Хотя этот подход работает, видимость текстуры не так заметна, как мне хотелось бы. Вы можете слабо увидеть текстуру сквозь наложение цвета (см. прикрепленный скриншот), но она не такая четкая и яркая, как то, что предлагает Novacolor на их сайте.
Что мне может не хватать?Есть ли в CSS или JavaScript более эффективные методы для достижения более выраженной видимости текстуры при сохранении полупрозрачного наложения цвета?
Что я пробовал:
Регулировка значений режима наложения фона:< /p>
Судя по их сайту, они, судя по всему, используют точные методы смешивания и, возможно, по-разному манипулируют текстурами.
Прикрепленный снимок экрана:
Текущая реализация: применен полупрозрачный цвет, текстура слабо видна.
Желаемый эффект: текстура остается более заметной, аналогично эффекту на сайте Novacolor.
Какие корректировки мне следует внести, чтобы улучшить это, или есть ли лучший способ добиться такого типа наложения? эффект? Буду очень признателен за любые рекомендации!
Что я пробовал:
Настройка значений режима наложения фона:
Я пробовал попробовал умножить, наложить и экранировать. Multiply работает лучше всего, но все равно не дает той яркой текстуры, к которой я стремлюсь.
Экспериментируем с прозрачностью:
Понижение значения альфа в rgba увеличивает видимость текстуры, но уменьшает цвет. присутствие.
Использование псевдоэлементов:
Обеспечение правильного наложения текстуры и цвета с помощью псевдоэлемента ::after.

Подробнее здесь: https://stackoverflow.com/questions/792 ... -using-css