Question

我只是想让背景图像使用两个或多个Grid项目的空间。

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

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）。它是重复的。我发布了另一个答案，结果却有所不同。

google.maps.event.addDomListener(window, 'load', init);

function init() {

    var latNo = null;
    var lngNo = null;
    var mapOptions = {
        zoom: 14,
        disableDefaultUI: true,
        center: new google.maps.LatLng(latNo, lngNo),
        styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#6863CE"},{"visibility":"on"}]}]
    };

    var mapElement = document.getElementById('map');

    var map = new google.maps.Map(mapElement, mapOptions);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: null
    });

    var postcode = $(".postcode-var").text();
    var address = "Belfast, Northern Ireland";

    var geocoder = new google.maps.Geocoder();

    var myLatLng = geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            latNo = results[0].geometry.location.lat();
            lngNo = results[0].geometry.location.lng();
            console.log(latNo + "" + lngNo);
            map.setCenter(results[0].geometry.location);
            marker.setPosition(results[0].geometry.location);
            marker.setMap(map);

        } else {
            console.log("Cannot find address");
        }

    });

    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
    }

Answer 2

还是这样？

我创建了一个div（.sub），它包装了您想要影响的第一个元素，您想要影响的最后一个元素以及两者之间的所有内容。然后，我创建了一个子div（.advert_back），该子div之间的任何元素都希望不受具有共享背景的初始div的影响。创建共享背景后，请在sub-div中添加一个普通背景（在本例中，我将其设置为白色），这样它将“覆盖”整个背景。

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);
  color: #ffff;
}

header>a {
  color: black;
}

.advert_back {
  background-color: #ffff;
  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 class="advert_back">
      <advert>"{ADVERT - BUY THIS NOW - ADVERT}" </advert>
    </div>
    <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>

有没有办法在网格项目之间共享背景？

2 个答案: