如何在两个CSS网格区域上将图像标签作为背景重叠

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

如下修改代码：

.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 3

我认为，如果页面的背景只有页面的一部分，则应该创建一种样式。然后查看步步高标签，选择所需的内容，以后，ID将在页面上创建任何内容，例如 Panel，td，div，....到达那里。 您无需添加任何图像。

Answer 4

您是否尝试过位置：文本div上的绝对位置？

Answer 5

我发现如果有人偶然发现了它：（确保您预览整页）

#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>