テキストを前面に持ってきて、イメージをバックグラウンドに残すにはどうすればいいですか？

Question

これは私の最初の質問を読んで、stackoverflowのコミュニティで私の問題を解決した後です。

私は自分のタイトルとサブタイトルを前面に持っていきたいです。私はz-indexで試しましたが、それでも動作しません。お手伝いありがとう。

これはコードです：https://codepen.io/gabrielacaesar/pen/gWyqJb?editors=1100

.container { 
 
    padding: 0; 
 
    max-width: 1500px; 
 
    margin: 0 auto; 
 
} 
 

 
.title { 
 
    height: 65vh; 
 
    background-image: url("images/alvoradaBetoBarataPR7maio2017.jpeg"); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: top; 
 
} 
 

 
.grayscale { 
 
    filter: grayscale(95%); 
 
} 
 

 
.blur { 
 
    filter: blur(3px); 
 
} 
 

 
.grayscale.blur { 
 
    filter: blur(3px) grayscale(95%); 
 
    z-index: 5; 
 
} 
 

 
.title h1, 
 
.title h2 { 
 
    z-index: 666; 
 
    color: black; 
 
    text-align: center; 
 
    margin-top: 5px; 
 
} 
 

 
.title h1 { 
 
    font-size: 85px; 
 
    font-weight: 700; 
 
    font-family: 'Signika', Helvetica, sans-serif; 
 
} 
 

 
.title h2 { 
 
    font-size: 35px; 
 
    font-weight: 400; 
 
    font-family: 'Lato', Helvetica, sans-serif; 
 
} 
 

 
.title img { 
 
    object-fit: cover; 
 
    z-index: -666; 
 
}

<section class="container"> 
 
    <div class="title grayscale blur" alt="Foto: Beto Barata/Presidência da República - 7.maio.2017"> 
 
    <h1>alto escalão</h1> 
 
    <h2>os poderosos indicados pelo Palácio do Planalto</h2> 
 
    </div> 
 
</section>

Answer 1

のWebkitブラーがコンテナ内のすべてに適用され、その周りの唯一の方法は、絶対配置されたコンテナにぼやけた画像を置くことですテキストの下に。このペンを参照してください。https://codepen.io/anon/pen/GmLeZp?editors=1100

PS：justify-content：topは無効です。

HTML

<section class="container"> 
    <div class="title grayscale blur" alt="Foto: Beto Barata/Presidência da República - 7.maio.2017"> 
    </div> 
<div class="content"> 
     <h1>alto escalão</h1> 
     <h2>os poderosos indicados pelo Palácio do Planalto</h2> 
</div> 
</section> 

CSS

.title { 
    height: 65vh; 
    width: 100%; 
    background-image: url("https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    display: flex; 
    flex-direction: column; 
    justify-content: top; 
    position: absolute; 
    z-index:0; 
} 

.grayscale { 
    filter: grayscale(95%); 
} 

.blur { 
    filter: blur(3px); 
} 

.grayscale.blur { 
    filter: blur(3px) grayscale(95%); 
} 

.content { 
    z-index: 100; 
    position: relative; 
} 
.content h1, .content h2 { 
    color: black; 
    text-align: center; 
    margin-top: 5px; 
    z-index: 100; 
} 

.content h1 { 
    font-size: 85px; 
    font-weight: 700; 
    font-family: 'Signika', Helvetica, sans-serif; 
} 

.content h2 { 
    font-size: 35px; 
    font-weight: 400; 
    font-family: 'Lato', Helvetica, sans-serif; 
} 

.title img { 
    object-fit: cover; 
} 

Answer 2

Z-インデックスは、同じレベルにタグを適用します。このような 何か（テキストがコンテナ内にあるので）動作しません。

<container> 
    <text> 
    </text> 
</container> 

container { 
    z-index: -1; 
} 
text { 
    z-index: 1; 
} 

さて、このような何かが作品：

<container> 
</container> 
<text> 
</text> 

container { 
    position: absolute; 
    z-index: -1; 
} 
text { 
    position: absolute; 
    z-index: 1; 
} 

両方のタグが同じレベルであるため。