figure和figcaption元素使用演示页面

展示

代码

• HTML：

  <figure>
      <img src="/assets/example.jpg" alt="示意图">
      <figcaption>示意图</figcaption>
  </figure>

• CSS：

  figure {
      display: grid;
      text-align: center;
  }
  figure > :where(img, figcaption) {
      grid-area: 1 / 1;
  }
  figcaption {
      color: #fff;
      background-color: rgba(0, 0, 0, .6);
      padding: 5px 10px;
      align-self: end;
  }