html - 有没有一种方法可以在不使用背景图像 : url();? 的情况下创建顶部带有文本的英雄图像

Question

有没有一种方法可以在不使用 background-image: url(); 和 position relative 的情况下创建上面有文字的主图？

也许可以用 css 网格来完成，不确定吗？我做到了这一点:

https://codepen.io/labanino/pen/NejZEy?editors=1100

Answer 1

没有 position:relative 和 background:url()

url("https://fonts.googleapis.com/css?family=Londrina+Solid");

* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2rem;
  color: #fff;
  margin:0;
  padding:0;
  position:absolute;
}

.hero {
  display: flex;
  justify-content:center;
  align-items:center;
}

.hero {
  img {
    width: 100vw;
  }
}

<div class="hero">
  <h1>This is my dummy text!</h1>
  <img src="//unsplash.it/600/200" alt="">
</div>