テキストが背景に表示されていません

私の作成した背景の上にh1ヘッダーが表示されませんなぜ起こったのか分かりません。 https://jsfiddle.net/b6gezctv/ここにjsfiddleがありますので、コードを実行して修正されるかどうかを確認することができます。テキストが背景に表示されていません

<!DOCTYPE html> 
</html> 
<head> 
    <title>Coming Soon</title> 
    <link rel="stylesheet" type="text/css" href="soon.css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" 
    rel="stylesheet"> 
</head> 
<body> 

    <div class="heading"> 
    <h1>COMING SOON</h1> 
     <hr> 
    </div> 

    <div class="start-1"></div> 
    <div class="start-2"></div> 
    <div class="start-3"></div> 

</body>

h1 { 
    text-align: center; 
    color: white; 
} 

.start-1 { 
    position: absolute; 
    background-color: #202b36; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    left: 0; 
    top: 0; 
    min-width: 950px; 
} 

.start-2 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    background-image: url(https://server.pro/s/img/bg-pattern.png); 
    background-color: transparent; 
    background-repeat: repeat; 
    width: 100%; 
    height: 100%; 
    opacity: 0.07; 
    z-index: 1; 
    min-width: 950px; 
} 

.start-3 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    background-image: 
url(https://farm3.staticflickr.com/2821/33503322524_4e67143f45_k.jpg); 
    background-color: transparent; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    opacity: 0.5; 
    min-width: 950px; 
}

出典

2017-06-28 ianmtrent

ない原因開いているタグの直後にも閉じたHTMLタグがあります。 – BSMP

あなたstart-1start-2 要素がposition: absoluteであり、彼らはあなたのh1をカバーしているためです。

position: relative; 
z-index: 100;

それとも、あなたはheadingクラス内hrを持っているので、私は、クラス全体にpositionとz-indexを追加することを示唆している：あなたはそれを見ることができますh1にpositionとz-indexを追加する必要がありますだけではなく、あなたのh1のh1要素

.heading { 
    position: relative; 
    z-index: 100; 
}

出典

2017-06-28 22:31:31

と私の答えで書いたように、白い背景に白いテキストの色があるので、h1は表示されないので、テキストの色や背景を変更してください。 – Johannes

CSSパラメータのフォント色（color）が白で、あなたは身体の背景やそののいずれかの親要素を持っていないので、では、白=白で表示されます。

したがって、背景を変更するか、フォントの色を変更してください。また

彼らはh1それらの位置の値を変更したり、他の要素からそのposition: absoluteを削除することをカバーしているので、あなたの他の要素は、position: absoluteと位置left:とtop: 0を持っています。以下のように、H1スタイリングに対して、それが動作します：：

出典

2017-06-28 22:36:02 Johannes

はどうやらのz-indexが配置要素を静的には適用できませんので、単に位置を追加

h1 { 
    text-align: center; 
    color: white; 
    z-index: 3; 
    position: relative; 
}

出典

2017-06-28 22:37:42

テキストが背景に表示されていません

答えて

関連する問題