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

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

使用固定式时

  

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

在这种情况下，您需要调整位置/大小以使其在右侧。基本上，图像必须位于屏幕后半部分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