Css 图像未显示/z索引未按预期工作_Css_Background Image_Z Index

Css 图像未显示/z索引未按预期工作

css

Css 图像未显示/z索引未按预期工作,css,background-image,z-index,Css,Background Image,Z Index,我试图在背景图像的底部放置一个带有一些天空的分隔器（class=“分隔器云”）。由于某些原因，它们不会显示出来——似乎云层隐藏在背景图像后面我一直在玩z-index，以便在背景图像的顶部得到云。但似乎也没有帮助。我错过了什么 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

我试图在背景图像的底部放置一个带有一些天空的分隔器（class=“分隔器云”）。由于某些原因，它们不会显示出来——似乎云层隐藏在背景图像后面

我一直在玩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>

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。

您应该在.divider clouds元素样式中添加一个100%的云。

如Martin Choraine所说

.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;
    width: 100%;
    position: absolute;
    z-index: 10;
}

更新小提琴

如果您想了解有关SVG和缩放的更多信息，我可以推荐本文：

您的div没有显示，因为它没有宽度属性，请将其添加到您的样式中：

。分隔云{
背景图片：url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
背景尺寸：封面；
背景位置：中上；
底部：0；
高度：100px；
位置：绝对位置；
z指数：10；
宽度：500px；
}