Question

好吧，我试着寻找解决方案，我尝试了多种解决方案但却无法让它们专门用于我的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（通过背景）都包含在上面的代码中。

有什么想法吗？

Answer 1

我认为你应该在代码中添加z-index，以便将该div放在所有元素之后

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

Answer 2

在此课程中添加z-index

 .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-index

    #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>

无法在html中保留高于图像的任何内容

2 个答案: