grid-area与元素重叠实例页面

展示

代码

• HTML：

  <figure>
      <img src="../images/nature-11.jpg">
      <figcaption>自然风景</figcaption>
  </figure>

• CSS：

  figure {
      display: inline-grid;
  }
  figure > img,
  figure > figcaption {
      grid-area: 1 / 1 / 2 / 2;
  }
  figure > figcaption {
      align-self: end;
      text-align: center;
      background-color: #0009;
      color: #fff;
      line-height: 2;
  }