图片轮播中嵌套Span实现底部半透明横幅文本不显示的问题排查

我看了你的代码，问题出在几个关键的CSS设置上，导致内部的横幅span完全看不到。咱们一步步来修复：

问题根源分析 #

• 父元素的color: transparent：你给.slideshow li span设置了color: transparent，这会让所有子元素的文字默认变成透明，所以你的"test"文本根本看不到。
• 内部span缺少定位和宽度：内部的横幅span没有设置定位方式，加上父元素是绝对定位，子元素默认静态定位且没有宽度，自然无法正常显示在图片底部。
• 父元素的opacity动画影响：父元素的动画会改变opacity，子元素会继承这个透明度；另外你还写错了background-repeat的属性值（应该是no-repeat而非none）。

修复后的代码 #

修改后的CSS #

.slideshow li { list-style: none; position: relative; /* 给列表项添加相对定位，作为内部绝对定位的参考容器 */ }
.slideshow, .slideshow:after { width: 100%; top: 0px; left: 0px; z-index: 0; margin: 0; }
.slideshow li span { 
    width: 100%; 
    height: 100vh; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    /* 移除color: transparent，避免影响子元素文字 */
    background-size: cover; 
    background-position: center 5%; 
    background-repeat: no-repeat; /* 修正属性值 */
    opacity: 0; 
    z-index: 0; 
    -webkit-backface-visibility: hidden; 
    -webkit-animation: imageAnimation 16s linear infinite 0s; 
    -moz-animation: imageAnimation 16s linear infinite 0s; 
    -o-animation: imageAnimation 16s linear infinite 0s; 
    -ms-animation: imageAnimation 16s linear infinite 0s; 
    animation: imageAnimation 16s linear infinite 0s; 
}
/* 添加横幅span的专属样式 */
.slideshow li span .banner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background-color: rgba(0,0,0,0.7); /* 用rgba代替opacity，避免继承父元素的opacity动画影响 */
    color: #fff; /* 设置文字颜色，确保可见 */
    display: flex;
    align-items: center;
    padding: 0 20px; /* 可选：给文字添加内边距，提升可读性 */
}
.slideshow li:nth-child(2) span { -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; }
.slideshow li:nth-child(3) span { -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s; }
.slideshow li:nth-child(4) span { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; }
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }

修改后的HTML #

<ul class="slideshow">
<li><span style="background-image:url(https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"><span class="banner">test</span></span></li>
<li><span style="background-image:url(https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"><span class="banner">test</span></span></li>
<li><span style="background-image:url(https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"><span class="banner">test</span></span></li>
</ul>

关键修改点说明 #

1. 移除父span的color: transparent，并给横幅span设置color: #fff，确保文字可见。
2. 给列表项.slideshow li添加position: relative，作为内部绝对定位元素的参考容器。
3. 给横幅span添加position: absolute; bottom: 0; left: 0; width: 100%;，让它固定在图片底部并铺满宽度。
4. 将横幅背景从background-color:black; opacity:0.7;改为background-color: rgba(0,0,0,0.7)，避免父元素的opacity动画影响横幅透明度。
5. 修正background-repeat: none为正确的background-repeat: no-repeat。

这样修改后，你就能看到图片底部的半透明横幅和文字了，也能正常测试横幅的显示效果。

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