Question

我的网格布局为2行，第一行2列，第二行3列。它们之间的网格间距为10px。给每个单独的网格一个背景图像是没有问题的。但是，如果我希望它们都具有相同的背景图像，该背景图像从左上方的网格开始，一直延伸到右下方的网格。所有网格上都有一张大背景图像，只是由白色网格间隙隔开。

html,
body {
  height: 100%;
}
.grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.grid_cell_one {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

.grid_cell_two {
  grid-column: 4 / span 3;
  grid-row: 1 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

.grid_cell_three {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

.grid_cell_four {
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

.grid_cell_five {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

<div class="grid">
  <div class="grid_cell_one">
  </div>
  <div class="grid_cell_two">
  </div>
  <div class="grid_cell_three">
  </div>
  <div class="grid_cell_four">
  </div>
  <div class="grid_cell_five">
  </div>
</div>

Answer 1

想法是考虑使用background-attachement:fixed，但是背景将不再跟随滚动：

html,
body {
  height: 100%;
  margin:0;
}

.grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.grid>* {
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.grid_cell_one {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

.grid_cell_two {
  grid-column: 4 / span 3;
  grid-row: 1 / span 1;
}

.grid_cell_three {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
}

.grid_cell_four {
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
}

.grid_cell_five {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
}

<div class="grid">
  <div class="grid_cell_one">
  </div>
  <div class="grid_cell_two">
  </div>
  <div class="grid_cell_three">
  </div>
  <div class="grid_cell_four">
  </div>
  <div class="grid_cell_five">
  </div>
</div>

另一个想法是考虑在网格容器上使用多个背景，您将用白色（或背景中使用的任何颜色）填充空白。

为网格项目添加了一个透明层，以更好地说明

html,
body {
  height: 100%;
  margin:0;
}

.grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  background: 
    /*middle horizontal line*/
    linear-gradient(#fff,#fff) center/100% 10px,
    /*top vertical line*/
    linear-gradient(#fff,#fff) top center/10px 50%,
    /*bottom lines*/
    linear-gradient(#fff,#fff) calc(1*100%/3 - 3px) 100%/10px 50%,
    linear-gradient(#fff,#fff) calc(2*100%/3 + 3px) 100%/10px 50%,
    /*main background*/
    url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg") center/cover;
  background-repeat:no-repeat;
}

.grid>* {
  background: rgba(255, 255, 0, 0.2);
  /*to illustrate*/
}

.grid_cell_one {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

.grid_cell_two {
  grid-column: 4 / span 3;
  grid-row: 1 / span 1;
}

.grid_cell_three {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
}

.grid_cell_four {
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
}

.grid_cell_five {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
}

<div class="grid">
  <div class="grid_cell_one">
  </div>
  <div class="grid_cell_two">
  </div>
  <div class="grid_cell_three">
  </div>
  <div class="grid_cell_four">
  </div>
  <div class="grid_cell_five">
  </div>
</div>

您可以检查此链接以获取有关所使用的不同值的更多详细信息：Using percentage values with background-position on a linear gradient

Answer 2

使您的Grid-Background透明，并将父级的背景图像设置为所需的背景图像。

LG RT

如何获得背景图像以覆盖网格布局

2 个答案: