能否用CSS实现含文本的两个div混合效果？需支持动态数字

根据你的需求和给定的HTML结构，我们可以通过定位重叠元素+混合模式实现目标效果，同时配合JavaScript实现数字动态变化。之前mix-blend-mode没生效大概率是元素层级或定位没设置正确，下面是具体实现方案：

核心CSS实现 #

.digits-show {
  position: relative;
  width: fit-content;
  overflow: hidden;
  /* 可根据需求调整容器大小、字体等基础样式 */
  font-size: 2rem;
  font-weight: bold;
}

.digits-show__bg {
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  z-index: 1;
  color: #000; /* 数字颜色 */
  /* 让数字铺满容器，可添加滚动动画增强动态感 */
  white-space: nowrap;
  animation: scrollDigits 10s linear infinite;
}

.digits-show__text {
  position: relative;
  z-index: 2;
  color: #fff; /* 文字基础颜色 */
  mix-blend-mode: difference; /* 关键混合模式，让文字与背景数字产生对比效果 */
  /* 可选：添加文字阴影增强可读性 */
  text-shadow: 0 0 2px rgba(0,0,0,0.3);
}

@keyframes scrollDigits {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

动态更新数字的JavaScript #

如果需要数字实时动态变化，可以用简单的JS定时更新内容：

const bgElement = document.querySelector('.digits-show__bg');

// 生成随机数字字符串的函数
function generateRandomDigits(length) {
  let digits = '';
  for (let i = 0; i < length; i++) {
    digits += Math.floor(Math.random() * 10);
  }
  return digits;
}

// 每2秒更新一次数字
setInterval(() => {
  bgElement.textContent = generateRandomDigits(50);
}, 2000);

关键说明 #

• 定位与层级：通过position: relative/absolute让两个子元素重叠，z-index确保文字层在数字背景层上方，这是混合模式生效的前提。
• mix-blend-mode：difference模式会让文字颜色与背景颜色产生反色对比，你也可以尝试multiply、screen等其他模式，根据实际视觉需求调整。
• 动态效果：CSS动画实现数字滚动，JS定时生成随机数字字符串，满足数字动态变化的要求。

如果你的目标效果是文字镂空显示背景数字（即文字区域显示数字，其他区域隐藏），可以调整方案为：

.digits-show {
  position: relative;
  width: fit-content;
  font-size: 2rem;
  font-weight: bold;
}

.digits-show__text {
  position: relative;
  z-index: 2;
  color: transparent;
  -webkit-mask: text;
  mask: text;
}

.digits-show__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: #000;
}

这个方案下，文字区域会透出下方的数字背景，其他区域隐藏数字，也是常见的效果之一，你可以根据实际需求选择。

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