如何优化CSS/JS透明颜色叠加效果，提升纹理可见度？

功能需求 #

• 展示纹理图片（如纹理墙面、涂料样本）
• 支持用户从调色板选择颜色
• 动态将所选颜色以半透明叠加层应用在图片上，同时保留下方纹理的可见性

效果对比 #

当前实现效果：

期望达到的效果：

已尝试方案 #

• 使用CSS ::after伪元素创建叠加层
• 设置background-blend-mode: multiply实现颜色与纹理的混合
• 通过JavaScript动态转换十六进制颜色为RGBA值，调整叠加颜色

存在的问题 #

当前方案叠加后的纹理可见度未达预期，仅能隐约看到纹理，无法达到类似Novacolor网站的清晰效果。已尝试调整background-blend-mode参数（测试过multiply、overlay、screen，其中multiply效果最佳）、修改RGBA的透明度（降低透明度会提升纹理可见度，但会削弱颜色表现）、确保伪元素与纹理正确堆叠，但问题仍未解决。

实现代码示例 #

HTML #

<div class="template-image-container" id="pattern-image">
  <!-- 占位纹理图片 -->
  <img
    src="https://i.imgur.com/lD0NBBd.png" 
    alt="带有叠加层的纹理模板" 
    class="template-image" 
  />
</div>

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;
  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 #

/**
 * 为图片容器应用叠加颜色
 * @param {string} colorCode - 十六进制颜色码（如 "#bdada2"）
 */
function applyOverlayColor(colorCode) {
  const imageContainer = document.getElementById("pattern-image");

  if (colorCode) {
    // 将十六进制颜色转换为50%透明度的RGBA
    const transparentColor = hexToRgba(colorCode, 0.5);
    imageContainer.style.setProperty("--overlay-color", transparentColor);
    imageContainer.setAttribute("data-color-overlay", "true");
  } else {
    // 重置叠加层为透明
    imageContainer.style.setProperty("--overlay-color", "transparent");
    imageContainer.removeAttribute("data-color-overlay");
  }
}

/**
 * 将十六进制颜色转换为RGBA格式
 * @param {string} hex - 十六进制颜色码
 * @param {number} alpha - 透明度值（0到1）
 * @returns {string} RGBA颜色字符串
 */
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})`;
}

// 页面加载时示例：应用颜色叠加
document.addEventListener("DOMContentLoaded", () => {
  const sampleColor = "#bdada2";
  applyOverlayColor(sampleColor);
});

提问 #

请问还缺少哪些关键步骤？是否有更优的CSS或JavaScript技术可以在保持半透明颜色叠加的同时提升纹理可见度？希望得到相关指导与改进方案。

内容的提问来源于stack exchange，提问作者Thomas Hansen