Как наложить тег изображения в качестве фона на две области CSS Grid

Question

Изображение является тегом img и его нужно растянуть как фоновое изображение на две области: «img» и «content». Текст должен находиться над растянутым изображением в области содержимого. Просто, но как? Я не могу найти очевидных ответов в Интернете.

.media {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    width: 100%
}
.media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "img content";
    margin-bottom: 1em;
}

.image {
    grid-area: img;
    background-color: #ffd8a8;
}

.text {
    grid-area: content;
    padding: 10px;
}

<div class="media">
    <img class="image" src="https://loremflickr.com/500/200" />
    <div class="text">This is a media object example. 
      We can use grid-template-areas to switch around the image and text part of the media object.
    </div>
</div>

Answer 1

Есть много способов получить желаемый результат.

Вы также можете сделать изображение фоном DIV вместо тега IMG внутри DIV.

Но я придерживался вашего кода ниже и просто добавил CSS, чтобы поместить текст DIV поверх изображения и растянуть изображение до 100% со скрытым overflow.

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  width: 100% display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
  overflow: hidden;
}

.image {
  grid-area: img;
  background-color: #ffd8a8;
  width: 100%;
  float: left;
}

.text {
  grid-area: content;
  padding: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  text-shadow: 1px 1px 2px black;
  box-sizing: border-box;
}

<div class="media">
  <img class="image" src="https://loremflickr.com/500/200" />
  <div class="text"><b>This is a media object example. 
      We can use grid-template-areas to switch around the image and text part of the media object.</b>   </div>
</div>

Answer 2

Я думаю, что если на заднем плане страницы есть только одна часть страницы, вы должны создать стиль. Затем посмотрите на тег нарды и выберите все, что вы хотите. Позже, идентификатор будет создан для чего-либо на странице, например. Панель, тд, див, .... возьми там. Вам не нужно добавлять изображения.

Answer 3

Измените ваш код следующим образом:

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  width: 100%
}

.media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.image {
  grid-area: img;
  background-color: #ffd8a8;
}

.text {
  grid-area: content;
  padding: 10px;
}

.media {
  background-image: url("https://loremflickr.com/700/200");
  background-repeat: no-repeat;
  height: 150px;
}

<div class="media">
  <div class="text">This is a media object example. We can use grid-template-areas to switch around the image and text part of the media object.
  </div>
</div>

Вот снимок экрана с выводом:

Answer 4

Я понял, если кто-нибудь наткнется на него: (убедитесь, что вы просматриваете с полной страницей)

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 100px;
  grid-template-areas: "empty text" "mobile mobile";
}

#container img {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  width: 100%;
  overflow: hidden;
}

#container p {
  grid-area: text;
  color: red;
  align-self: center;
  justify-self: center;
  z-index: 1;
}

@media (max-width: 768px) {
  #container p {
    grid-area: mobile;
    color: red;
    align-self: center;
    justify-self: center;
    z-index: 1;
  }
}

<div id="container">
  <img src="https://loremflickr.com/500/200">
  <p>SOME TEXT OVER IMAGE</p>
</div>

Answer 5

Вы пробовали положение: абсолютное в тексте div?