父元素应用translate变换时CSS mix-blend-mode失效问题求助

当父元素.marque应用transform: translateX(-100%)时，会创建新的堆叠上下文，子元素的mix-blend-mode仅会与该上下文内的元素混合，无法和外部的固定背景图产生预期的混合效果。而将混合模式移到父元素上，又会丢失单个.title-link hover时取消混合的功能。

方案1：替换transform为定位属性实现平移 #

放弃transform，改用position: relative配合left属性实现滚动，避免父元素创建新的堆叠上下文，让子元素的混合模式仍能作用于外部背景图。

修改后的关键CSS代码：

.marque {
  position: relative;
  display: flex;
  transition: left 10s linear; /* 将transform过渡改为left过渡 */
  animation-iteration-count: infinite;
  will-change: left; /* 优化动画性能 */
}

.marque.move {
  left: -100%; /* 替换translateX(-100%) */
}

该方案完全保留原有hover逻辑，且无需调整DOM结构，唯一缺点是left动画的性能略低于transform，但通过will-change可大幅优化。

方案2：将背景图纳入父元素堆叠上下文（保留transform性能） #

如果需要保留transform的高性能动画，可以将固定背景图复制到.marque的伪元素中，让背景与文本处于同一堆叠上下文，同时保持视觉上的固定效果。

修改后的关键CSS代码：

.marque {
  position: relative;
  display: flex;
  transition: transform 10s linear;
  animation-iteration-count: infinite;
}

/* 添加伪元素承载背景图 */
.marque::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://4.bp.blogspot.com/-XkviAtJ1s6Q/T3YFb2RUhDI/AAAAAAAAAVQ/EHomLZlFMKo/s1600/small+cat.jpg");
  background-size: cover;
  z-index: -1; /* 置于文本下方 */
  pointer-events: none; /* 不干扰hover事件 */
}

.marque.move {
  transform: translateX(-100%);
}

同时可移除原有的.background-marque元素避免重复背景。此方案既保留了transform的流畅动画，又维持了子元素的混合模式效果，单个.title-link的hover功能不受影响。

两种方案均兼容原有hover逻辑：

.title-link:hover {
  mix-blend-mode: initial;
  color: blue;
}

hover时子元素会正常取消混合模式，显示蓝色文本。

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