почему текст отображается под задним фоном, а не на нём? И как это исправить

Question

body {
  font-family: "Rostov";
  color: #CD2C24;
  font-size: 32px;
  letter-spacing: 5px;
  z-index: 2;
}

h1 {
  z-index: 2;
}

div {
  height: 100vh;
  z-index: 1;
}

.striped {
  background: linear-gradient( lightblue 80%, gray 20%);
}

@font-face {
  font-family: "Rostov";
  src: url("../fonts/Rostov.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  z-index: 2;
}

<center>
  <div class="striped"></div>
  <h1>Какие бывают технические зависимости, и как от них избавиться</h1>
</center>

Answer 1

Ну, у вас h1 находится вне div. Потому он отображается под ним.

body {
  font-family: "Rostov";
  color: #CD2C24;
  font-size: 32px;
  letter-spacing: 5px;
}

div.striped {
  height: 100vh;
  /* z-index: 1; */
  background: linear-gradient(lightblue 80%, gray 20%);
}

<center>
  <div class="striped">
    <h1>Какие бывают технические зависимости, и как от них избавиться</h1>
  </div>
</center>

P.S. По возможности, не используйте center - это устаревший тег

БЛОГ НА HUSL

почему текст отображается под задним фоном, а не на нём? И как это исправить

Ответы (1 шт):