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

因为两个标签都处于同一级别。

如何将文字放在前面并将图像保留在背景上？

2 个答案: