CSS幻灯片只显示无序列表而不是壁纸答案

【问题标题】：CSS slideshow only shows unordered list instead of wallpapersCSS幻灯片只显示无序列表而不是壁纸
【发布时间】：2021-12-04 09:17:55
【问题描述】：

我仅使用 HTML 和 CSS 将教程中的代码重写为 CSS 幻灯片。它使用了一个包含多个跨度的无序列表，使用 CSS 创建了动画效果，并将 .jpg 文件分配给每个列表项。还有一部分处理不支持 css 动画的浏览器。起初我认为这只是链接样式表时的一个基本错误，但似乎并非如此，或者我找不到确切的错误。我尝试重写整个代码，同时将其与教程所说的进行比较。它仍然不起作用，而是显示没有样式的无序列表。代码如下：

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Slideshow doesnt work :/</title>
        <link rel = "stylesheet" type="text/css" href = "/index.css">
    </head>
    <body id = "page">
            <ul class = "slideshow">
                <li><span>Image 1</span></li>
                <li><span>Image 2</span></li>
                <li><span>Image 3</span></li>
                <li><span>Image 4</span></li>
                <li><span>Image 5</span></li>
                <li><span>Image 6</span></li>
                <li><span>Image 7</span></li>
                <li><span>Image 8</span></li>
                <li><span>Image 9</span></li>
                <li><span>Image 10</span></li>
            </ul>
    </body>
</html>

CSS:

.slideshow,
.slideshow.slideshow{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.slideshow:after{
    content: '';
    background: transparent url(/img/pattern.png) repeat top left;
}

.slideshow li span{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 72s linear infinite 0s; 
}

.slideshow li:nth-child(1) span{
    background-image: url(./img/img1.jpg);
}

.slideshow li:nth-child(2) span{
    background-image: url(/img/img2.jpg);
    animation-delay: 12s;
}

.slideshow li:nth-child(3) span{
    background-image: url(/img/img3.jpg);
    animation-delay: 24s;
}

.slideshow li:nth-child(4) span{
    background-image: url(/img/img4.jpg);
    animation-delay: 36s;
}

.slideshow li:nth-child(5) span{
    background-image: url(/img/img5.jpg);
    animation-delay: 48s;
}

.slideshow li:nth-child(6) span{
    background-image: url(/img/img6.jpg);
    animation-delay: 60s;
}

.slideshow li:nth-child(7) span{
    background-image: url(/img/img7.jpg);
    animation-delay: 72s;
}

.slideshow li:nth-child(8) span{
    background-image: url(/img/img8.jpg);
    animation-delay: 84s;
}

.slideshow li:nth-child(9) span{
    background-image: url(/img/img9.jpg);
    animation-delay: 96s;
}

.slideshow li:nth-child(10) span{
    background-image: url(/img/img10.jpg);
    animation-delay: 108s;
}



@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 }
}

.no-cssanimations .slideshow li span{
    opacity: 1;
}

【问题讨论】：

标签： html css css-animations

【解决方案1】：

span元素默认是内联的，所以你应该在.slideshow li span的规则中添加display: block，这样其中的大小和位置参数才会生效。

【讨论】：

我这样做了，但它似乎并没有改变任何东西。还有其他想法吗？
好吧，检查你的文件路径，包括样式表和背景图片