html - div后没有出现文字

Question

我试图让文本出现在包含背景图像的 div 元素之后，但它下面没有出现任何文本。我不确定要添加什么，该段落不存在，并且我已经为“这是一个测试”尝试了多种样式。

<div id="opener">
<p id="introText">
Adam Ginther is a<class id="blueText"> front-end developer</class> with an interest in responsive & mobile design
</p>
</div>
<br>
<div id="bottomOpener">
<p id="awesome">
I'm also 100% awesome
</p>
</div>
<p> This is a test</p>


/*  first.css */
body {
    background-color: black;
    font-family: 'Fenix', serif;
}
#opener {
    background-image: url('../images/background.jpg');
    background-color: #373737;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    height: 800px;
    width: 100%;
    position: fixed;
    text-align: center;
}
#introText {
    width: 400px;
    height: 40px;
    margin-left: 200px;
    left: 20%;
    color: #ececec;
    background-color: black;
    text-align: center;
    position: absolute;
    padding: 50px 80px 50px 80px;
    font-size: 1.2em;
    /* black, 50% opacity */
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
}
#blueText {
    color:#00aeff;
}
#awesome {
    color: white;
}
#bottomOpener {
    background-color: white;
}
p {
    color: green;
}

Answer 1

最有可能的是，您的文本隐藏在position: fixed;图像下方。您可以position: static;改为使用它，或调整段落的位置。如果您有 jsFiddle，我们可以进一步测试您的情况。

Answer 2

当您position: fixed在#opener元素上使用它时，它会从文档的正常流程中提取并显示在其余内容的顶部。您想看到的 p 元素因此隐藏在下面。

Answer 3

intro如其他答案所述，您的文字在您的后面。这是一个修复它的小提琴http://jsfiddle.net/ASd33/通过添加z-index: -1到您的#opener.

请注意，这不是一个好的解决方案，但它足以让您调试。