在html 和css 中如何放在图片前面以便于阅读？

Question

所以我试图在图像上方制作 <h1></h1> 以便您可以阅读它，但它随机出现在屏幕的左下角。我正在使用垂直网格列执行此操作，所以这可能就是问题所在。有人可以看到我做错了什么并帮助我吗？

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
  scroll-behavior: smooth;
}

.clear {
  clear: both;
}

.container {
  display: grid;
  column-gap: 20px;
  grid-template-columns: repeat(16, 1fr);
}

.container .beginpagina {
  grid-column: 1 / 17;
  height: 700px;
  position: relative;
}

.container .beginpagina img {
  width: 100%;
  height: auto;
  filter: blur(0.7px);
  clip-path: polygon(100% 0, 100% 60%, 50% 78%, 0 60%, 0 0);
}

.container .beginpagina h1 {
  position: absolute;
  color: red;
  font-size: 30px;
}

<div class="container">

  <div class="clear"></div>

  <div class="beginpagina">
    <img src="img/universe3.jpeg" />
    <h1>Beginpagina</h1>
  </div>

</div>

Answer 1

给你的h1“左”风格，它重新定位你的h1元素的x位置，我建议你必须给你的h1元素“z-index”（以确保你的“h1”元素保持出现而不是与您的“.beginpagina”元素分层）

.container .beginpagina h1{
    position: absolute;
    color: red;
    font-size: 30px;
}

Answer 2

使用 CSS-Grid，您不需要使用定位。只需将项目放在同一个网格单元格中。

要分层，只需调整h1的z-index即可。

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
  scroll-behavior: smooth;
}


.container {
  display: grid;
  column-gap: 20px;
  grid-template-columns: repeat(16, 1fr);
}

.container .beginpagina {
  grid-column: 1 / -1;
  height: 700px;
  position: relative;
  display:grid
}

.container .beginpagina img {
  width: 100%;
  height: auto;
  filter: blur(0.7px);
  clip-path: polygon(100% 0, 100% 60%, 50% 78%, 0 60%, 0 0);
  grid-row: 1;
  grid-column:1;
}

.container .beginpagina h1 {
  color: red;
  font-size: 30px;
  grid-row: 1;
  grid-column:1;
  z-index:2;
  text-align:center;
}

<div class="container">

  <div class="beginpagina">
  <img src="https://assets.codepen.io/3999/chicago_dual_monitor-2560x1024.jpg" />
    <h1>Beginpagina</h1>
  </div>

</div>

在html 和css 中如何放在图片前面以便于阅读？

How do you place in front of image in html and css so that you can read it?

html

css

grid-layout