HTML/CSS 在后台放映幻灯片？

Question

我为网站上的幻灯片编写了 HTML 源代码。我希望幻灯片放映在背景中（即全屏和在文本后面）但即使我的 max-width 等设置为 100%，它也不会保持完整屏幕，我不知道如何确保它落后于其他一切。这是 main_rjfe.html 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>R. J. Farah Engineering</title>
        <link rel="stylesheet" type="text/css" href="main_rjfe.css">
    </head>

    <body>
        <div class="box fade-in logo">
            <img src="logo.png" style="width:270px;height:128px;">
        </div>
        <div class="menu_box fade-in menu"> 
        <div id="menu">
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">work</a></li>
                <li><a href="#">contact us</a></li>
            </ul>
        </div>
        </div>

        <div class="css-slideshow"> 
            <figure> 
                <img src="img1.jpg" width="495" height="370" /> 
                <figcaption><strong>CSS3:</strong> CSS3 delivers a...</figcaption> 
            </figure> 
            <figure> 
                <img src="img2.jpg" width="495" height="370" /> 
            <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption> 
            </figure> 
            <figure> 
                <img src="img3.jpg" width="495" height="370" /> 
            <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption> 
            </figure> 

        </div>
    </body>
</html>

这是我的 CSS 文件：

/*Slideshow*/
.css-slideshow{
   position: absolute;
   max-width: 100%;
   height: auto;
   margin: auto;
}
.css-slideshow figure{
   margin: 0;
   position: absolute;
}
.css-slideshow figcaption{
   position: absolute;
   top: 0;
   color: #fff;
   background: rgba(0,0,0, .3);
   font-size: .8em;
   padding: 8px 12px;
   opacity: 0;
   transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
   transition: opacity .5s;
   opacity: 1;
}
.css-slideshow figure{
   opacity:0;
}

figure:nth-child(1) {
   animation: xfade 18s 12s infinite;
}
figure:nth-child(2) {
   animation: xfade 18s 6s infinite;
}
figure:nth-child(3) {
   animation: xfade 18s 0s infinite;
}
@keyframes xfade{
   0%{
      opacity: 0;
   }
   32% {
      opacity:1;
   }
   33%{
      opacity: 0;
   }
   98% {
      opacity:0;
   }
   100% {
      opacity:1;
   }
}

.css 文件中还有更多内容，但 Whosebug 问题指南说只放置我认为导致问题的代码。如果您需要文件的其余部分，请发表评论，我会更新问题。谢谢！！

Answer 1

两件事：首先，如果您想要 100% 的图像，则必须将它们设置为

figure img {
    width: 100%;
}

您也应该为图形标签执行此操作：

figure {
    position: absolute;
    width: 100%;
}

第二个是你应该考虑让它们成为背景图片，因为无论如何幻灯片都在背景中，并且只需转换包含的 div。

最后，您需要确保您的图形标签不在任何相关容器内，否则它们的绝对尺寸将固定到该容器。

HTML/CSS 在后台放映幻灯片？

HTML/CSS slideshow in background?

html

css

background

slideshow