具有CSS幻灯片的英雄节，标题和法向流的定位？

Question

我正在尝试使用CSS动画通过幻灯片创建Hero / Jumbotron。但是，到目前为止，我所获得的一切都破坏了正常流程。

幻灯片放映后位于顶部/下方的所有内容，然后删除position: absolute部分的.pic-wrapper即可使.pic-wrapper占据整个机身。

我需要使英雄部分的标题居中，然后使网站的其余部分照常进行。有帮助吗？

HTML

<section class="pic-wrapper">
    <h1>Slideshow Heading, should be on top of slideshow</h1>
    <figure class="pic-1" style="background-image: url(https://images.pexels.com/photos/258109/pexels-photo-258109.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    <figure class="pic-2" style="background-image: url(https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    <figure class="pic-3" style="background-image: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    <figure class="pic-4" style="background-image: url(https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
</section>
<section>
<h2>New Section, this currently ends up under the slideshow</h2>
</section>

CSS

.pic-wrapper {
        position: absolute;
        width: 100%;
        min-height: 50vh;
        /* overflow: hidden; */
        }

        figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;

        /*animation*/
        animation: slideShow 24s linear infinite 0s;
        -o-animation: slideShow 24s linear infinite 0s;
        -moz-animation: slideShow 24s linear infinite 0s;
        -webkit-animation: slideShow 24s linear infinite 0s;
        }

        .pic-1 {
        opacity: 1;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-y: 50%;
        }

        .pic-2 {
        animation-delay: 6s;
        -o-animation-delay: 6s;
        -moz--animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-y: 50%;
        }

        .pic-3 {
        animation-delay: 12s;
        -o-animation-delay: 12s;
        -moz--animation-delay: 12s;
        -webkit-animation-delay: 12s;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-y: 50%;
        }

        .pic-4 {
        animation-delay: 18s;
        -o-animation-delay: 18s;
        -moz--animation-delay: 18s;
        -webkit-animation-delay: 18s;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-y: 50%;
        }
        /* keyframes*/

        @keyframes 
        slideShow {  0% {
        opacity: 0;
        transform:scale(1);
        -ms-transform:scale(1);
        }
        5% {
        opacity: 1
        }
        25% {
        opacity: 1;
        }
        30% {
        opacity: 0;
        transform:scale(1.1);
        -ms-transform:scale(1.1);
        }
        100% {
        opacity: 0;
        transform:scale(1);
        -ms-transformm:scale(1);
        }
        }
        @-o-keyframes 
        slideShow {  0% {
        opacity: 0;
        -o-transform:scale(1);
        }
        5% {
        opacity: 1
        }
        25% {
        opacity: 1;
        }
        30% {
        opacity: 0;
        -o-transform:scale(1.1);
        }
        100% {
        opacity: 0;
        -o-transformm:scale(1);
        }
        }
        @-moz-keyframes 
        slideShow {  0% {
        opacity: 0;
        -moz-transform:scale(1);
        }
        5% {
        opacity: 1
        }
        25% {
        opacity: 1;
        }
        30% {
        opacity: 0;
        -moz-transform:scale(1.1);
        }
        100% {
        opacity: 0;
        -moz-transformm:scale(1);
        }
        }
        @-webkit-keyframes 
        slideShow {  0% {
        opacity: 0;
        -webkit-transform:scale(1);
        }
        5% {
        opacity: 1
        }
        25% {
        opacity: 1;
        }
        30% {
        opacity: 0;
        -webkit-transform:scale(1.1);
        }
        100% {
        opacity: 0;
        -webkit-transformm:scale(1);
        }
        }

Codepen link

Answer 1

z-index是您的朋友。如：

.pic-wrapper {
            position: absolute;
            width: 100%;
            min-height: 50vh;
            /* overflow: hidden; */
            }

            /* added this */
            h1 {
                z-index: 20;
                position: absolute;
            }

            figure {
              /* and this */
              z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;

            /*animation*/
            animation: slideShow 24s linear infinite 0s;
            -o-animation: slideShow 24s linear infinite 0s;
            -moz-animation: slideShow 24s linear infinite 0s;
            -webkit-animation: slideShow 24s linear infinite 0s;
            }

            .pic-1 {
            opacity: 1;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position-y: 50%;
            }

            .pic-2 {
            animation-delay: 6s;
            -o-animation-delay: 6s;
            -moz--animation-delay: 6s;
            -webkit-animation-delay: 6s;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position-y: 50%;
            }

            .pic-3 {
            animation-delay: 12s;
            -o-animation-delay: 12s;
            -moz--animation-delay: 12s;
            -webkit-animation-delay: 12s;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position-y: 50%;
            }

            .pic-4 {
            animation-delay: 18s;
            -o-animation-delay: 18s;
            -moz--animation-delay: 18s;
            -webkit-animation-delay: 18s;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position-y: 50%;
            }
            /* keyframes*/

            @keyframes 
            slideShow {  0% {
            opacity: 0;
            transform:scale(1);
            -ms-transform:scale(1);
            }
            5% {
            opacity: 1
            }
            25% {
            opacity: 1;
            }
            30% {
            opacity: 0;
            transform:scale(1.1);
            -ms-transform:scale(1.1);
            }
            100% {
            opacity: 0;
            transform:scale(1);
            -ms-transformm:scale(1);
            }
            }
            @-o-keyframes 
            slideShow {  0% {
            opacity: 0;
            -o-transform:scale(1);
            }
            5% {
            opacity: 1
            }
            25% {
            opacity: 1;
            }
            30% {
            opacity: 0;
            -o-transform:scale(1.1);
            }
            100% {
            opacity: 0;
            -o-transformm:scale(1);
            }
            }
            @-moz-keyframes 
            slideShow {  0% {
            opacity: 0;
            -moz-transform:scale(1);
            }
            5% {
            opacity: 1
            }
            25% {
            opacity: 1;
            }
            30% {
            opacity: 0;
            -moz-transform:scale(1.1);
            }
            100% {
            opacity: 0;
            -moz-transformm:scale(1);
            }
            }
            @-webkit-keyframes 
            slideShow {  0% {
            opacity: 0;
            -webkit-transform:scale(1);
            }
            5% {
            opacity: 1
            }
            25% {
            opacity: 1;
            }
            30% {
            opacity: 0;
            -webkit-transform:scale(1.1);
            }
            100% {
            opacity: 0;
            -webkit-transformm:scale(1);
            }
            }

<section class="pic-wrapper">
        <h1>Slideshow Heading</h1>
        <figure class="pic-1" style="background-image: url(https://images.pexels.com/photos/258109/pexels-photo-258109.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-2" style="background-image: url(https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-3" style="background-image: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-4" style="background-image: url(https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    </section>

<section>
  <h2>New Section</2>
</section>

您可以通过添加包装器，文本中心等来对其进行抛光...

.pic-wrapper {
            position: absolute;
            width: 100%;
            min-height: 50vh;
            /* overflow: hidden; */
            }

            /* added this */
            #hero {
                z-index: 20;
                position: absolute;
                width: 100%;
                padding: 2vw;
                text-align: center;
                text-size: 200%
            }

            

            figure {
              /* and this */
              z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;

            /*animation*/
            animation: slideShow 24s linear infinite 0s;
            -o-animation: slideShow 24s linear infinite 0s;
            -moz-animation: slideShow 24s linear infinite 0s;
            -webkit-animation: slideShow 24s linear infinite 0s;
            }

            .pic-1 {
            opacity: 1;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position-y: 50%;
            }

            .pic-2 {
            animation-delay: 6s;
            -o-animation-delay: 6s;
            -moz--animation-delay: 6s;
            -webkit-animation-delay: 6s;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position-y: 50%;
            }

            .pic-3 {
            animation-delay: 12s;
            -o-animation-delay: 12s;
            -moz--animation-delay: 12s;
            -webkit-animation-delay: 12s;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position-y: 50%;
            }

            .pic-4 {
            animation-delay: 18s;
            -o-animation-delay: 18s;
            -moz--animation-delay: 18s;
            -webkit-animation-delay: 18s;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position-y: 50%;
            }
            /* keyframes*/

            @keyframes 
            slideShow {  0% {
            opacity: 0;
            transform:scale(1);
            -ms-transform:scale(1);
            }
            5% {
            opacity: 1
            }
            25% {
            opacity: 1;
            }
            30% {
            opacity: 0;
            transform:scale(1.1);
            -ms-transform:scale(1.1);
            }
            100% {
            opacity: 0;
            transform:scale(1);
            -ms-transformm:scale(1);
            }
            }
            @-o-keyframes 
            slideShow {  0% {
            opacity: 0;
            -o-transform:scale(1);
            }
            5% {
            opacity: 1
            }
            25% {
            opacity: 1;
            }
            30% {
            opacity: 0;
            -o-transform:scale(1.1);
            }
            100% {
            opacity: 0;
            -o-transformm:scale(1);
            }
            }
            @-moz-keyframes 
            slideShow {  0% {
            opacity: 0;
            -moz-transform:scale(1);
            }
            5% {
            opacity: 1
            }
            25% {
            opacity: 1;
            }
            30% {
            opacity: 0;
            -moz-transform:scale(1.1);
            }
            100% {
            opacity: 0;
            -moz-transformm:scale(1);
            }
            }
            @-webkit-keyframes 
            slideShow {  0% {
            opacity: 0;
            -webkit-transform:scale(1);
            }
            5% {
            opacity: 1
            }
            25% {
            opacity: 1;
            }
            30% {
            opacity: 0;
            -webkit-transform:scale(1.1);
            }
            100% {
            opacity: 0;
            -webkit-transformm:scale(1);
            }
            }

<section class="pic-wrapper">
        <div id="hero"><h1>Slideshow Heading</h1></div>
        <figure class="pic-1" style="background-image: url(https://images.pexels.com/photos/258109/pexels-photo-258109.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-2" style="background-image: url(https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-3" style="background-image: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-4" style="background-image: url(https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    </section>

<section>
  <h2>New Section</2>
</section>

Answer 2

[我认为您应该将position的.pic-wrapper设置简单地更改为relative，这将使它进入流程。我看不到absolute设置的原因。

此外，您应该添加height设置，而不仅仅是min-height。您可以使用height中的min-height 而不是，也可以将height: 50vh和固定的px值用于“最小高度”>