如何在指定的网格列中定位背景？

Question

我有一个有两列的网格。在右栏中，我正在尝试在滚动时实现视差背景效果，但由于某种原因，背景看起来像是从屏幕中间居中。如何定位背景以使其仅位于右列的网格中？

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/

Answer 1

使用固定时

背景相对于视口是固定的。即使元素具有滚动机制，背景也不会随element.ref移动

在这种情况下，您需要调整位置/大小以使其在右侧。基本上图像需要位于屏幕的后半部分的中心，即75%，但是我们必须将图像的中心放在75%上，因此我们添加其宽度的25%（在400px中定义的background-size等于变容器宽度） 。然后我们把它放在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