0

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

我的问题是外部图像/列有背景附件：已修复，它有效，但到目前为止我无法像我想要的那样定位背景图像。

我能够使其工作的唯一方法是将左侧放置在左侧，将右侧放置在右侧（这与我正在寻找的相反）。这使得图像在您加宽页面时尽可能宽，我希望它们保持紧密并在页面宽度降低时使其外边缘溢出。

我可以通过示例更好地展示我想要的效果。

1.）这个有固定的背景图像滚动，但随着页面变宽，它们不会紧紧地拥抱中心的内容，而是移动到外面。当它们溢出时，它们会向内部溢出——我正在寻找与这两种行为相反的行为。

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

2.）除了背景图像没有固定并随内容滚动之外，下面的这个完美地工作

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

这些示例中唯一的区别应该是 CSS 中的 background-position 和 background-attachment 属性。

第一个示例中的 html 和 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>

4

1 回答 1

0

使用 04FS 的建议并知道我的中心列和侧面图像的宽度，我能够使用纯 CSS 和 background-position 属性中的 calc() 函数解决问题。

基本上，取中心列和侧面图像的宽度，将总和除以 2 并在 calc() 函数中使用 50% 以获得所需的侧面图像定位和行为。

注意 leftTower 和 rightTower 类选择器

下面是代码和一个工作的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

于 2019-03-06T20:42:17.147 回答