Есть ли способ создать изображение героя с текстом поверх него, не используя background-image: url () ;?

Question

Есть ли способ создать изображение героя с текстом поверх него, не используя background-image: url(); и position relative?

Может быть, это можно сделать с помощью CSS-сетки, не уверен?Я получил это далеко:

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

Answer 1

Это выполняет то, что вы просите:

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

CSS:

@import 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: #2F4858;
}

.hero {
    position: relative;
}

.theImage {
    position: absolute;
    width: 100vw;
    top: 0;
    z-index: -1;
}

.theText {
    position: absolute;
    top: 80px;
    width: 100vw;
    left:50%;
    margin-left: calc(-50vw);
    text-align: center;
    z-index: 1;
}

Answer 2

без 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>

Answer 3

Почему?Здесь лучше всего использовать относительное положение *

Вы можете использовать высоту 0 и переполнение, видимое в тексте