背景附件：修复了如何使图像“非全屏”？

问题描述

嘿，我正在尝试我朋友想让我做的一件事，但我还是个新手。我试图用 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,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,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");
}

解决方法

变化：

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

到：

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

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

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

,

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

.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,felis.
          </p>
      </div>
    </div>
  </div>