css - 有没有办法在网格元素之间共享背景？

Question

我只想让背景图像使用两个或更多网格元素的空间。

我考虑过使用容器元素，但如果我只想为两个元素使用背景图像而不是整个元素容器怎么办？

HTML:

<div class="container">
    <header></header>
    <main></main>
    <advert></advert>
    <aside></aside>
    <footer></footer>
  </div>

CSS:

header  {
  grid-area: header;
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 1em 0 1em 0;

}

header > a  {
  color: black;
}

advert  {
  grid-area: advert;
  background-image: url(./mi-vr-5.jpg);
  background-position-x: 50%;
  background-position-y: 30%;
  background-size: 1000px
}

Answer 1

这就是您要找的吗？

我向使用相同背景的 2 个元素添加了一个 div (.sub)。它是重复的。我发布了另一个结果不同的答案。

    header  {
      grid-area: header;
      display: flex;
      flex-flow: wrap;
      flex: 0 1 auto;
      justify-content: space-evenly;
      align-items: center;
      padding: 1em 0 1em 0;

    }
    
   .sub{
      background-image: url(https://cdn.pixabay.com/photo/2017/12/11/22/42/peacock-feathers-3013486_1280.jpg)
   }

    header > a  {
      color: black;
    }

    advert  {
      grid-area: advert;
      background-image: url(./mi-vr-5.jpg);
      background-position-x: 50%;
      background-position-y: 30%;
      background-size: 1000px
    }

    <div class="container">
        <header>"{HEADER - I AM THE HEADER - HEADER}"</header>
          <div class="sub">
            <main>
            <p>Lorem ipsum dolor sit amet, no duo altera ornatus, omittam postulant mea ea. In eius nobis quaerendum nec, est saepe deserunt percipitur ei. Stet accusam consequuntur te eam, posse discere vix ex. Per ne accusam molestie.

</p>
            
            </main>
          </div>
            <advert>"{ADVERT - BUY THIS NOW - ADVERT}"</advert>
          <div class="sub">
            <aside><p>Docendi conclusionemque in duo, te qui persequeris definitiones. In has tollit rationibus complectitur. Cu eligendi aliquando qui, sea mentitum interpretaris ea. Veritus pertinax nam ei. Cum essent maiestatis at, eu mundi tempor blandit qui.

Modo quando consequat mel at. Ne per omnesque torquatos, his partiendo petentium cu. Ei possit mentitum consectetuer usu, ne aliquip laoreet eam, agam possit qui ei. Vis augue imperdiet eu, an sed electram urbanitas. Cu moderatius neglegentur mel, debitis tacimates an has. Cu nam vide malis, quas elaboraret omittantur ex quo.</p></aside>
          </div>
            <footer>"{FOOTER - I AM THE FOOTER - FOOTER}"</footer>
      </div>