header 的背景图片在整个页面上显示为背景图片

Question

我正在扩展我的网站，想在 header 中进行自动幻灯片放映。作为基础，我使用了本网站的教程：https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

但是，问题在于背景图像不仅显示在header中，而且显示在整个页面中。

现在的问题是我必须改变什么，这样 "cb-slideshow" 元素就不会覆盖整个网站，而只覆盖 header.

由于我在整个CSS区还是比较新手，所以只尝试在“.cb-slideshow里跨度”改位置为relative，当然不行工作。

<section id="home" class="tt-fullHeight" data-stellar-vertical-offset="50" data-stellar-background-ratio="0.2">

    <ul class="cb-slideshow">
        <li><span>Image 01</span><div><h3>JavaScript</h3></div></li>
        <li><span>Image 02</span><div><h3>NGC-3432</h3></div></li>
        <li><span>Image 03</span><div><h3></h3></div></li>
        <li><span>Image 04</span><div><h3></h3></div></li>
        <li><span>Image 05</span><div><h3></h3></div></li>
        <li><span>Image 06</span><div><h3></h3></div></li>
    </ul>

    <div class="intro ">
        <div class="intro-sub">Ich bin NAME</div>
        <h1>TEXT</h1>
        <p>TEXT</p>

        <div class="social-icons">
            <ul class="list-inline">
                <li><a href="TWITTER"><i class="fab fa-twitter"></i></a></li>
                <!-- I have removed the remaining icons for the clarity times -->
            </ul>
        </div> <!-- /.social-icons -->
    </div>

    <div class="mouse-icon">
        <div class="wheel"></div>
    </div>

</section>

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    /*background: transparent url(../../beta/assets/JS-captcha.jpg) repeat top left;*/
}
.cb-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;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
    display:none;
}
.cb-slideshow li:nth-child(1) span {
    background-image: url(../../beta/assets/JS-captcha.jpg);
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../../beta/assets/NGC-3432.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(/beta/assets/JS-captcha.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(/beta/assets/JS-captcha.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(/beta/assets/JS-captcha.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(/beta/assets/JS-captcha.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
/* 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 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 80px }
}

预计背景只会在 header 中显示和更新。然而，目前，背景图像显示在整个网站上

Answer 1

.classofthebackground{ width:100%； /如有必要，根据图像的分辨率/ 背景尺寸：封面； }

并且不要忘记为特定的 class

使用正确的位置

Answer 2

尝试将 "overflow: hidden;" 添加到您的 .cb-slideshow class。

此外，您已将高度和宽度设置为 100%，以便默认为浏览器的宽度和高度。也尝试减小该尺寸。

Answer 3

position relative 属性不起作用，因为它是相对于什么？你应该有另一个具有absolute 属性的对象。有两种方法可以做到： 1.You 在幻灯片放映周围创建一个包装器 class，将位置设置为 relative 并将 .cbslideshow 设置为绝对包装器 class.This 如果您要显示多个图像，则方法很好。 2.You 将 .classofthebackground 设置为 width: 100% 这将覆盖 header.Fast 少量图像。

只是提示，不要将 html 和 css 与 that.WAY 一起使用太多 work.Use bootstrap.You 不必使用 css.Everything 已预制，供您复制粘贴和修改。

祝你好运。

Answer 4

我现在已经完全删除了 "position: absolute;"，非常感谢您的回答。

header 的背景图片在整个页面上显示为背景图片

The background image intended for the header is displayed as a background image on the entire page

html

css

background-image