Javascript 无法在html中获取任何保持在图像上方的内容_Javascript_Html_Css

Javascript 无法在html中获取任何保持在图像上方的内容

javascript html css

Javascript 无法在html中获取任何保持在图像上方的内容,javascript,html,css,Javascript,Html,Css,嗯，我试着四处寻找解决方案，我确实尝试了多种解决方案，但无法让它们专门用于我的HTML/CSS。我从来没有做过太多的css或html，所以我在这方面是相当新的大学项目，所以忽略关于埃隆·马斯克和铁人的毫无意义的废话。我也讨厌它 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="animate.min.css">

嗯，我试着四处寻找解决方案，我确实尝试了多种解决方案，但无法让它们专门用于我的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-index，以便将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;
    }

    #headerbg {
       background: grey;
       text-align:center;
       padding:20px;
       position:relative;
       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;
    }

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

此标记将位于body标记中

<body>
<div class="background-image">
</div>
<div id="headerbg">
    <h1>Elon Musk</h1>
</div>
</body>

不要贬低钢铁侠你想让图片做什么呢？我想让图片做它正在做的事情，而不是整个“我要掩盖一切，而不是坐在一切后面。”你想让标题出现在前面吗？顺便说一句，为什么你的主要内容标记在head标签中？这都是关于z索引和位置的。试试看这就是@fahad.kazi所做的，我尝试了整个z-index来解决这个问题，但没有成功。我想我是傻了，把它放错地方了。谢谢大家的帮助。现在修好了。