如何实现Marquee与图片同行且文字可覆盖图片（附现有代码）

嘿，我来帮你搞定这个需求！要让“Diversitati transparent”从右向左滚动，还能和图片同排且文字延伸到图片区域，我们可以调整原有布局的定位逻辑，让元素层级和位置更灵活：

修改后的完整代码 #

/* 保留你原有的文字阴影样式，同步应用到滚动文字上 */
h1, .marquee-text {
  text-shadow: 2px 2px #FF0000;
}

.header {
  position: relative; /* 让内部绝对定位元素基于这个容器定位 */
  height: 100px; /* 和图片高度保持一致，确保容器高度足够 */
}

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
  z-index: 1; /* 把图片放在底层，让文字可以覆盖它 */
}

.marquee-container {
  position: absolute;
  top: 18px; /* 和你原h1的top值对齐，保证垂直位置一致 */
  left: 0; /* 从容器最左端开始，让文字能覆盖图片区域 */
  right: 0; /* 让滚动区域占满容器宽度 */
  z-index: 2; /* 确保滚动文字在图片上方 */
}

.marquee-text {
  font-size: 2em; /* 可根据需求调整，和原h1大小匹配 */
  white-space: nowrap; /* 避免文字换行 */
}

<div class="header">
  <img src="sigla.jpg" alt="logo" />
  <div class="marquee-container">
    <marquee direction="left" scrollamount="3">Diversitati transparent</marquee>
  </div>
</div>

关键调整说明 #

• 将.header设为position: relative，作为内部绝对定位元素的参考容器
• 通过z-index层级设置，让滚动文字可以覆盖在图片上方
• 滚动容器用left: 0定位，确保文字滚动时能从右侧进入并穿过图片区域
• marquee标签的direction="left"实现从右向左滚动，scrollamount可调整滚动速度

这样调整后，滚动文字就会和图片处于同一行，且文字能自然延伸覆盖到图片区域啦！

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