0

背景画像を含む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;
}
4

3 に答える 3

3

ほとんどの場合、テキストは画像の下に隠されていますposition: fixed;。position: static;代わりに作成するか、段落の位置を調整することができます。jsFiddleをお持ちの場合は、状況をさらにテストできます。

于 2013-03-18T22:44:42.323 に答える
0

要素で使用するposition: fixedと#opener、ドキュメントの通常のフローから抽出され、残りのコンテンツの上に表示されます。したがって、表示したいp要素はその下に隠れています。

于 2013-03-18T22:47:36.370 に答える
0

intro他の回答で述べられているように、あなたのテキストはあなたの後ろにあります。これは、に追加することでhttp://jsfiddle.net/ASd33/を修正するフィドルです。z-index: -1#opener

これは良い解決策ではありませんが、デバッグするには十分であることに注意してください。

于 2013-03-18T22:47:57.973 に答える