Comment puis-je apporter mon texte à l'avant et de laisser l'image sur l'arrière-plan?

Question

Ceci est ma première question après avoir lu et de résoudre mes problèmes avec la communauté stackoverflow.

Je veux apporter mon titre et sous-titre à l'avant. J'ai essayé avec z-index mais ça ne marche toujours pas. Merci pour l'aide.

Voici le code: 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

flou Webkit applique à tout dans le récipient, la seule façon autour d'elle est de mettre l'image avec le flou dans un récipient placé de façon absolue ci-dessous le texte. Voir ce stylo: https://codepen.io/anon/pen/GmLeZp?editors=1100

PS: justify contenu: top n'est pas valide.

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-Index applique uniquement les balises dans le même niveau. Quelque chose comme cela ne fonctionnera pas (Comme le texte est à l'intérieur du conteneur):

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

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

Eh bien, quelque chose comme ça fonctionne:

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

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

Parce que les deux balises sont dans le même niveau.