Мобильная версияФункциональность включает в себя:
Отображение изображения (например, текстурированной стены или образца краски).
Разрешение пользователям выбирать цвет из палитры.
Динамическое применение выбранного цвета в виде полупрозрачного наложения поверх изображения. изображение с сохранением видимой текстуры под цветом.
Лучший результат, который я получил:
[img]https://i.sstatic. net/kZaNFvpb.png[/img]
Чего хотелось бы достичь:
[img]https:/ /i.sstatic.net/Oly5m6q1.png[/img]
Я пробовал использовать следующее:
псевдоэлементы CSS с ::after для наложения.
background-blend -режим: умножение; чтобы объединить цвет наложения с текстурой.
JavaScript для динамической установки цвета наложения с помощью встроенных стилей и значения rgba().
Я также использую JavaScript для обновления цвета наложения динамически:
Проблема:
Хотя этот подход работает, видимость текстуры не так заметна, как мне хотелось бы. Вы можете слабо увидеть текстуру сквозь наложение цвета (см. прикрепленный скриншот), но она не такая четкая и яркая, как то, что предлагает Novacolor на их сайте.
Что мне может не хватать?Есть ли в CSS или JavaScript более эффективные методы для достижения более выраженной видимости текстуры при сохранении полупрозрачного наложения цвета?
Что я пробовал:
Регулировка значений режима наложения фона:< /p>
Судя по изображению, которое я имитирую с веб-сайта, они, похоже, используют точные методы смешивания и, возможно, по-разному манипулируют своими текстурами.
Прикрепленный снимок экрана:
Текущая реализация: применен полупрозрачный цвет , текстура слабо видна.
Желаемый эффект: текстура остается более заметной.
Какие корректировки мне следует внести, чтобы улучшить это, или есть ли лучший метод достижения такого типа наложения эффект? Буду очень признателен за любые рекомендации!
Что я пробовал:
Настройка значений режима наложения фона:
Я пробовал попробовал умножить, наложить и экранировать. Multiply работает лучше всего, но все равно не дает той яркой текстуры, к которой я стремлюсь.
Экспериментируем с прозрачностью:
Понижение значения альфа в rgba увеличивает видимость текстуры, но уменьшает цвет. присутствие.
Использование псевдоэлементов:
Обеспечение правильного наложения текстуры и цвета с помощью псевдоэлемента ::after.
Вот пример моего кода:
Код: Выделить всё
/**
* Apply an overlay color to the image container.
* @param {string} colorCode - The hex color code to apply (e.g., "#bdada2").
*/
function applyOverlayColor(colorCode) {
const imageContainer = document.getElementById("pattern-image");
if (colorCode) {
// Convert hex color to RGBA with 50% transparency
const transparentColor = hexToRgba(colorCode, 0.5);
imageContainer.style.setProperty("--overlay-color", transparentColor); // Set dynamic overlay color
imageContainer.setAttribute("data-color-overlay", "true"); // Enable overlay
} else {
// Reset overlay to transparent if no color is selected
imageContainer.style.setProperty("--overlay-color", "transparent");
imageContainer.removeAttribute("data-color-overlay"); // Disable overlay
}
}
/**
* Convert a hex color to RGBA format.
* @param {string} hex - The hex color code (e.g., "#bdada2").
* @param {number} alpha - The alpha value for transparency (0 to 1).
* @returns {string} - The RGBA color string (e.g., "rgba(189, 173, 162, 0.5)").
*/
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})`;
}
// Example: Apply overlay color on button click (you can replace this logic)
document.addEventListener("DOMContentLoaded", () => {
const sampleColor = "#bdada2"; // Replace with a dynamically selected color
applyOverlayColor(sampleColor); // Apply the overlay to the image
});Код: Выделить всё
/* Styling for the image container */
.template-image-container {
position: relative;
width: 100%; /* Matches the width of the parent element */
height: auto; /* Adjusts height based on the image aspect ratio */
overflow: hidden; /* Ensures overlay doesn't go outside the container */
}
/* Ensure the image fills the container */
.template-image-container img {
display: block;
width: 100%;
height: auto;
}
/* Pseudo-element for overlay */
.template-image-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent; /* Default is fully transparent */
background-blend-mode: multiply; /* Ensures overlay blends with texture */
pointer-events: none; /* Allows interactions with underlying image */
z-index: 1; /* Places overlay above the image */
transition: background-color 0.3s ease; /* Smooth transition on color change */
}
/* When an overlay color is applied */
.template-image-container[data-color-overlay="true"]::after {
background-color: var(--overlay-color, transparent); /* Dynamic overlay color */
}Код: Выделить всё
[img]https://i.imgur.com/lD0NBBd.png[/img]
alt="Template with overlay"
class="template-image"
/>
Подробнее здесь: https://stackoverflow.com/questions/792 ... -using-css
