可以'在html中，没有任何东西可以停留在图片上方

Can't get anything to stay above image in html

本文关键字：停留在 任何东 html 可以      更新时间：2023-09-26

嗯，我试着四处寻找解决方案，我确实尝试了多种解决方案，但无法让它们专门用于我的HTML/CSS。我从来没有做过很多css或html，所以我在这方面还很陌生。

大学项目，所以忽略关于埃隆·马斯克和钢铁侠的毫无意义的废话。我也讨厌它。

        <!DOCTYPE html>
        <html>
        <head>
        <link rel="stylesheet" href="animate.min.css">
        <style>
        @-webkit-keyframes fade-in {
        0%   { opacity: 0; }
        100% { opacity: 1; }
        }
        .background-image {
        background-image: URL('ironman.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        -webkit-animation-name: fade-in;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 0s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        }
        .background-image.visible {
        opacity: 1;
        }
        <!-- End of background animation -->
        headerReplacement {
            font-size:40px;
            color:aqua;
            margin-top:-10px;
            margin-bottom:-15px;
            letter-spacing: 20px;
        }
        h1, p, body, html {
           margin:0;
           padding:0;
        }
        body {
           background:#000;
           font:12px verdana, sans-serif;
           color:#000;
        }
        #headerbg {
           background: grey;
           text-align:center;
           padding:20px;
        }
        <!-- End of tag formatting -->
    </style>
    <div class="background-image">
    </div>
    <title>Elon Musk</title>
    <div id="headerbg">
        <h1>Elon Musk</h1>
    </div>
</head>
<body>
    <h12>test</h12>
</body>
</html>

所发生的事情是，图像逐渐消失，标题也因此而褪色。一旦图像淡出，它就会占据一切，我无法阻止它这样做。

样式表用于将动画应用于标头，所有正在使用的css/html（由后台使用）都包含在上面的代码中。

有什么想法吗？

我认为应该在代码中添加z索引，以便将该div放在的所有元素后面

background-image {
    ...your code
    z-index: -1;
}

在此类中添加z索引

 .background-image {
    background-image: URL('ironman.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    }

同时在此类中添加z索引

    #headerbg {
       background: grey;
       text-align:center;
       padding:20px;
       position:relative;
       z-index:1;
    }

此标记将在正文标签中

<body>
<div class="background-image">
</div>
<div id="headerbg">
    <h1>Elon Musk</h1>
</div>
</body>
相关文章：