这是我的第一个问题,阅读并解决了我的问题与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>
在该CodePen中,您的文本位于前面。 https://codepen.io/anon/pen/GmLeZp?editors=1100 –