テキストが背景画像の背後に隠れています

Question

背景画像の前にテキストを表示します。しかし、それは常に私のテキストを隠すでしょう。 コードは次のとおりです。

HTML：

<div class="header"> 
<div class="container"> 
    <div class="container-bg"> 
    </div> 
    <div class="container-content"> 
    <h1>Test Test Test Test Test Test</h1> 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test</p> 
    </div> 
</div> 
</div> 

CSS：

h1 { 
    font-size: 46px; 
    color: #ccc 
} 
p { 
    font-size: 28px; 
    color: #ccc 
} 
.header { 
    position: relative; 
    padding: 30px 0; 
} 
.container-bg { 
    position: absolute; 
    top: 0; 
    bottom: -60px; 
    right: 0; 
    left: 0; 
    background-image: 
    linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), 
    url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700); 
    background-size: cover; 
} 
.container-content { 
    text-align: center; 
} 

JSFiddle： https://jsfiddle.net/g700q3qc/3/

:)

Answer 1

がここにposition:relativeを追加助けてください -

0ここで

.container-content { 
    text-align: center; 
    position: relative; 
} 

h1 { 
 
    font-size: 46px; 
 
    color: #ccc 
 
} 
 
p { 
 
    font-size: 28px; 
 
    color: #ccc 
 
} 
 
.header { 
 
    position: relative; 
 
    padding: 30px 0; 
 
} 
 
.container-bg { 
 
position: absolute; 
 
top: 0; 
 
bottom: -60px; 
 
right: 0; 
 
left: 0; 
 
    background-image: 
 
linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), 
 
url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700); 
 
background-size: cover; 
 
} 
 
.container-content { 
 
    text-align: center; 
 
    position: relative; 
 
}

<div class="header"> 
 
<div class="container"> 
 
    <div class="container-bg"> 
 
    </div> 
 
    <div class="container-content"> 
 
<h1>Test Test Test Test Test Test</h1> 
 
<p>Test Test Test Test Test Test Test Test Test Test Test Test</p> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

あなたが行きます！

h1 { 
 
    font-size: 46px; 
 
    color: #ccc 
 
} 
 
p { 
 
    font-size: 28px; 
 
    color: #ccc 
 
} 
 
.header { 
 
    position: relative; 
 
    padding: 30px 0; 
 
} 
 
.container-bg { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t bottom: -60px; 
 
\t right: 0; 
 
\t left: 0; 
 
    background-image: 
 
    linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), 
 
    url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700); 
 
    background-size: cover; 
 
} 
 
.container-content { 
 
    text-align: center; 
 
    position: relative; 
 
}

<div class="header"> 
 
<div class="container"> 
 
    <div class="container-bg"> 
 
    </div> 
 
    <div class="container-content"> 
 
    <h1>Test Test Test Test Test Test</h1> 
 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test</p> 
 
    </div> 
 
</div> 
 
</div>