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文件中有更多内容，但StackOverflow问题指南说只放置我认为导致问题的代码。如果您需要文件的其余部分，请发表评论，我将更新问题。谢谢！

Answer 1

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

figure img {
    width: 100%;
}

您还应该为数字标记执行此操作：

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

第二个是你应该考虑制作背景图像，因为幻灯片无论如何都在背景中，只是转换包含的div。

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

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

1 个答案: