我有一个网格布局，假设第一行有 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>
关于想法是要考虑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>
您可以检查此链接以获取有关所使用的不同值的更多详细信息：在线性渐变上使用带有背景位置的百分比值 https://stackoverflow.com/q/51731106/8620333
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
