我怎样才能把我的文字放在前面，把图片放在背景上？

Question

这是我阅读并解决我在 Whosebug 社区遇到的问题后的第一个问题。

我想把我的标题和副标题放在前面。我试过 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：证明内容：顶部无效。

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 只适用于同一级别的标签。这样的东西是行不通的（因为文本在容器内）：

<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;
}

因为两个标签在同一层级。

我怎样才能把我的文字放在前面，把图片放在背景上？

How can I bring my text to the front and leave the image on the background?

html

css

frontend

position

z-index