css - 图像未显示/z-index 未按预期工作

问题描述

我正在尝试在背景图像的底部放置一个带有天空的分隔线（class="divider-clouds"）。出于某种原因，它们只是不会显示 - 似乎云隐藏在背景图像后面。

我一直在玩 z-index 以便将云放在背景图像之上。但似乎也没有帮助。我错过了什么？？

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TurboTobias</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section id="hero-section">
        <div class="row">
            <div class="column hjemmeside-til-skyerne">
                <h1>Vil du have
                    <div class="h1-enhanced">raketfart</div>
                    <div class="h1-smaller">på din hjemmeside?</div>
                </h1>
                <span class="sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
            </div>
            <div class="column">
                <h2>Column 2</h2>
                <p>Some text..</p>
            </div>
            <div class="divider-clouds"></div>
        </div>
    </section>
</body>

</html>

CSS：

body {
    background: #fff;
    color: #333333;
    height: 100vh;
    margin: 0;
    box-sizing: border-box;
    font-family: open sans,Arial,sans-serif;
  }

#hero-section {
    background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 1;
    position: relative; 
}

.row {
    height: 100vh;
    width: 80%;
    max-width: 1080px;
    margin: auto;
    display: flex;
    z-index: 1;
  }

  .hjemmeside-til-skyerne {
    display: flex;
    align-self: center;
    align-items: center;
    flex-direction: column;
  }

  .hjemmeside-til-skyerne h1 {
    font-weight: 700;
    font-size: 60px;
    color: #303030!important;
    line-height: 1em;
    text-transform: uppercase;
  }

  .h1-enhanced {
    font-weight: 900;
    font-size: 120%;
}

.h1-smaller {
    font-size: 70%;
}

.sub-h1 {
    font-size: 24px;
    color: #303030;
    font-weight: 400;
}

.divider-clouds {
    background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
    background-size: cover;
    background-position: center top;
    bottom: 0;
    height: 100px;
    position: absolute;
    z-index: 10;
}

代码片段

我希望云显示在底部，高度为 100px。

标签： cssbackground-imagez-index

css - 图像未显示/z-index 未按预期工作

问题描述

解决方案

推荐阅读