背景attachment:fixed 如何制作图片"not full screen"？

Question

嘿，我正在尝试我朋友想让我做的一件事，但我在这方面还是个新手。我试图用 js 对图像进行视差效果，但它不起作用，所以我解决了背景附件 - 已修复但仍然存在问题。该部分分为左右两半 - 一半是图像，另一半是文本（其中有三行）。我希望图像在滚动时保持固定，这当然有效，但是当我设置背景附件时，图像变大 - 全屏。我想保持 50% 的宽度，因为它似乎没有任何工作之前。

HTML

<div class="photos-wrap">
  <div class="left">
    <div class="popis">
      <div class="container">
        <h2><a href="#">budova</a></h2>
        <p>
          Quis autem vel eum iure reprehenderit qui in ea voluptate velit
          esse quam nihil molestiae consequatur, vel illum qui dolorem eum
          fugiat quo voluptas nulla pariatur? Nulla turpis magna, cursus sit
          amet, suscipit a, interdum id, felis.
        </p>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="pic1"></div>
  </div>
</div>

<div class="photos-wrap">
  <div class="left">
    <div class="pic2"></div>
  </div>
  <div class="right">
    <div class="popis">
      <div class="container">
        <a href="#">
          <h2><a href="#">interiér</a></h2>
          <p>
            Quis autem vel eum iure reprehenderit qui in ea voluptate velit
            esse quam nihil molestiae consequatur, vel illum qui dolorem eum
            fugiat quo voluptas nulla pariatur? Nulla turpis magna, cursus
            sit amet, suscipit a, interdum id, felis.
          </p>
        </a>
      </div>
    </div>
  </div>

  <div class="left">
    <div class="popis">
      <div class="container">
        <h2><a href="#">studia</a></h2>
        <p>
          Quis autem vel eum iure reprehenderit qui in ea voluptate velit
          esse quam nihil molestiae consequatur, vel illum qui dolorem eum
          fugiat quo voluptas nulla pariatur? Nulla turpis magna, cursus sit
          amet, suscipit a, interdum id, felis.
        </p>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="pic3"></div>
  </div>
</div>

和CSS

    .photos-wrap {
  display: flex;
  flex-wrap: wrap;
}
.left {
  flex: 50%;
}
.right {
  flex: 50%;
}
.left h2,
.right h2 {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 4px;
  line-height: 1rem;
}
.left h2 a,
.right h2 a {
  text-decoration: none;
  color: #111;
}
.left h2 a:hover,
.right h2 a:hover {
  color: #5b5b5b;
}
.popis p {
  color: #000;
  line-height: 2.1rem;
  margin-top: 3.3rem;
}
.popis {
  padding: 5.7rem;
}
.left,
.right {
  background-color: #f2f4f4;
}
.pic1,
.pic2,
.pic3 {
  background-size: cover;
  background-position: center center;
  height: 440px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.pic1 {
  background-image: url("../img/building.jpg");
}
.pic2 {
  background-image: url("../img/restaurant.jpg");
}
.pic3 {
  background-image: url("../img/studio.jpg");
}

Answer 1

变化中：

.pic1,
.pic2,
.pic3 {
  background-size: cover;
  background-position: center center;
...

至：

.pic1,
.pic2,
.pic3 {
  background-size: 50% auto;
  background-position: center right;
...

.pic2 {
  background-image: url("../img/restaurant.jpg");
  background-position: center left;
}

可能是解决您的问题的一种方法。

Answer 2

讨论了相同的问题here。发生这种情况是因为 background-attachment: fixed 总是根据规范定义将图像设置为视口大小。有不同的解决方法，包括 JS 或仅使用 CSS 来完成。 css 唯一的方法是将 background-size: cover 更改为 background-size: auto 50% 或您的图像应该具有的任何宽度，然后还设置 background-position: center right （如果图像在左边）。这样图像只占视口的一半。

.photos-wrap {
  display: flex;
  flex-wrap: wrap;
}
.left {
  flex: 50%;
}
.right {
  flex: 50%;
}

.popis {
  padding: 5.7rem;
}

.pic1, .pic2 {
  height: 440px;
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
    background-image: url("https://images.unsplash.com/photo-1609009835496-7121e5ade7d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80");
}

.pic1 {
  background-position: center right;
}

.pic2 {
    background-position: center left;
}

<div class="photos-wrap">
  <div class="left">
    <div class="popis">
      <div class="container">
        <h2>budova</h2>
        <p>
          Quis autem vel eum iure reprehenderit qui in ea voluptate velit
          esse quam nihil molestiae consequatur, vel illum qui dolorem eum
          fugiat quo voluptas nulla pariatur? Nulla turpis magna, cursus sit
          amet, suscipit a, interdum id, felis.
        </p>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="pic1">
    </div>
  </div>
</div>

<div class="photos-wrap">
  <div class="left">
    <div class="pic2"></div>
  </div>
  <div class="right">
    <div class="popis">
      <div class="container">
          <h2>interiér</h2>
          <p>
            Quis autem vel eum iure reprehenderit qui in ea voluptate velit
            esse quam nihil molestiae consequatur, vel illum qui dolorem eum
            fugiat quo voluptas nulla pariatur? Nulla turpis magna, cursus
            sit amet, suscipit a, interdum id, felis.
          </p>
      </div>
    </div>
  </div>

背景attachment:fixed 如何制作图片"not full screen"？

background attachment:fixed how to make the image "not full screen"?

css

background

parallax

image-size

background-attachment