我有一个有两列的网格。在右列中，我试图在滚动时实现视差背景效果，但由于某种原因，背景看起来像是从屏幕中间居中。如何定位背景，使其仅在右列的网格内？
header {
display: flex;
justify-content: center;
align-items: center;
background: gray;
}
body {
height: 10000px
}
.navLink {
padding: 0 25px;
}
#logo {
width: 5%;
height: 5%;
}
/*.container
{
display: grid;
grid-template-columns: [content] minmax(0, 1fr) [images] minmax(0, 1fr);
}*/
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr
}
.content {
grid-column: content;
background: blue;
}
#l-splash {}
.images {
grid-column: images;
background: yellow;
}
.spacing {
height: 100px;
}
.image-block {
width: 400px;
height: 200px;
margin: 0 auto;
}
#r-splash {}<div class="container">
<div class="content">
<div id="l-splash">
</div>
</div>
<div class="images">
<div class="spacing"></div>
<div id="r-splash">
<div class="image-block" style="background:url(http://placekitten.com/1543/1024) no-repeat center center fixed;"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>http://jsfiddle.net/c8jw45ux/1/
使用固定时
背景相对于视口是固定的。即使元素具有滚动机制，背景也不会随元素移动。裁判
在这种情况下，您需要调整位置/大小以使其位于右侧。基本上，图像需要位于屏幕后半部分的中心，这是75%但我们必须将图像的中心放在75%因此我们添加其宽度的25%(400px在background-size中定义等于conainer宽度)。然后我们把它放在顶部的100px处，这将给我们calc(75% + 100px) 100px/400px auto.
header {
display: flex;
justify-content: center;
align-items: center;
background: gray;
}
body {
height: 200vh;
}
.navLink {
padding: 0 25px;
}
#logo {
width: 5%;
height: 5%;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr
}
.content {
grid-column: content;
background: blue;
}
.images {
grid-column: images;
background: yellow;
}
.spacing {
height: 100px;
}
.image-block {
width: 400px;
height: 200px;
margin: 100px auto 0;
background:url(http://placekitten.com/1543/1024) calc(75% + 100px) 100px /400px auto fixed no-repeat;
}<div class="container">
<div class="content">
<div id="l-splash">
</div>
</div>
<div class="images">
<div id="r-splash">
<div class="image-block"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>当我们有两个相等的部分时，以上将在大屏幕上完美运行。在小屏幕上，您可以考虑媒体查询来调整位置。
您可以按照上面的逻辑增加图像的大小：
header {
display: flex;
justify-content: center;
align-items: center;
background: gray;
}
body {
height: 200vh;
}
.navLink {
padding: 0 25px;
}
#logo {
width: 5%;
height: 5%;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr
}
.content {
grid-column: content;
background: blue;
}
.images {
grid-column: images;
background: yellow;
}
.spacing {
height: 100px;
}
.image-block {
width: 400px;
height: 200px;
margin: 100px auto 0;
background:url(http://placekitten.com/1543/1024) calc(75% + 200px) 50px /800px auto fixed no-repeat;
}<div class="container">
<div class="content">
<div id="l-splash">
</div>
</div>
<div class="images">
<div id="r-splash">
<div class="image-block"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>您可以在此处获取有关计算的更多详细信息：https://stackoverflow.com/a/51734530/8620333