带有3列布局的故障，外部元素/列具有背景 - 附加条件:固定

Question

我真的很接近我想要的，一个3列布局，其中只有中心内容通过正常滚动栏滚动。

我的问题是外部图像/COLS具有背景：固定，有效，但是到目前为止，我无法像我想要的那样定位背景图像。

我能够使其工作的唯一方法是将左侧的左侧和右侧放在右侧（这与我要寻找的相反）。这使图像随着您扩展页面的扩大而宽，我想保持它们的紧密，并在降低页面宽度时使它们的外部边缘溢出。

我可以通过示例更好地显示我的所需效果。

1。）这个具有固定的背景图像滚动的背景图像，但是随着页面的扩大，而不是紧紧抓住中心的内容，它们移至外部。当他们溢出时，他们对内部的工作 - 我正在寻找这两种行为的相反。

https://codepen.io/xcr/pen/drnxpx

2。）下面的功能非常完美，除了背景图像未固定并用内容滚动

滚动

https://codepen.io/xcr/pen/jzbepo

这些示例中唯一的区别应该是CSS中的背景位置和背景 - 附加属性。

html＆amp;第一个示例中的CSS（接近工作）为

html, body {
    height: 100%;
    margin: 0;
    background-color: black;
    font-family: Verdana;
}
.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #000;
    height: 100%;
}
.leftTower {
    background-attachment: fixed;
    background-position: left top;
}
.rightTower {
    background-attachment: fixed;
    background-position: right top;
}
.side {
    min-height: 775px;
    flex-grow: 1;
    background-repeat: no-repeat;
    background-image: url("https://www.plaseebo.net/news/wp-content/uploads/2019/01/moonlight_gnaw_x_c-450x775.jpg");
}
.content {
    max-width: 750px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.mainContent {
    background-color: #00ff00;
    flex: 1;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.text-center {
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .side {
        display: none;
    }
}

<div class="wrapper">
    <a href="http://www.example.com" target="_blank" class="side leftTower">
    </a>
    <div class="content">
        <header class="text-center">
            <img src="https://i.pinimg.com/originals/57/27/d7/5727d7e809ed08fb9cbda10b1f4a5e48.jpg" class="img-fluid" />
        </header>
        <main class="mainContent text-center">
            This is the content area<br />
            <div style="height: 220px;background-color: #0000aa;color: white;margin: 0 15px 0 15px;">
                Taking up 220px of vertical space to show stick footer behavior
            </div>
        </main>
        <footer class="text-center">
            <img src="https://thecriticalcritics.com/review/wp-content/images/mid-noad.jpg" class="img-fluid" />
        </footer>
    </div>
    <a href="http://www.example.com" target="_blank" class="side rightTower">
    </a>
</div>

Answer 1

使用04FS的建议，并了解我的中心列的宽度和侧面图像，我能够用纯CSS解决问题，而在背景位置属性中的calc（）函数。p>基本上，将中心列的宽度和侧面图像宽度除以2，然后在Calc（）函数中使用50％以获取侧面图像的所需定位和行为。

请注意左台和右台类选择器

以下是代码和工作codepen

CSS

html, body {
    height: 100%;
    margin: 0;
    background-color: black;
    font-family: Verdana;
}
.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #000;
    height: 100%;
}
.leftTower {
    background-attachment: fixed;
    background-position: calc(50% - ((728px + 450px) / 2)) top;
}
.rightTower {
  background-attachment: fixed;
  background-position: calc(50% + ((728px + 450px) / 2)) top;
}
.side {
    min-height: 775px;
    flex-grow: 1;
    background-repeat: no-repeat;
    background-image: url("https://www.plaseebo.net/news/wp-content/uploads/2019/01/moonlight_gnaw_x_c-450x775.jpg");
}
.content {
    max-width: 750px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mainContent {
  background-color: #00ff00;
  flex: 1;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.text-center {
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .side {
    display: none;
  }
}

html

<div class="wrapper">
  <a href="http://www.example.com" target="_blank" class="side leftTower">
  </a>
  <div class="content">
    <header class="text-center">
      <img src="https://i.pinimg.com/originals/57/27/d7/5727d7e809ed08fb9cbda10b1f4a5e48.jpg" class="img-fluid" />
    </header>
    <main class="mainContent text-center">
      This is the content area<br />
      <div style="height: 220px;background-color: #0000aa;color: white;margin: 0 15px 0 15px;">
        Taking up 220px of vertical space to show stick footer behavior
      </div>
    </main>
    <footer class="text-center">
      <img src="https://thecriticalcritics.com/review/wp-content/images/mid-noad.jpg" class="img-fluid" />
    </footer>
  </div>
  <a href="http://www.example.com" target="_blank" class="side rightTower">
  </a>
</div>

https://codepen.io/xcr/pen/jjyeqy