0

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

2 回答 2

2

改变：

.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;
}

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

于 2020-12-28T10:13:33.233 回答
1

这里讨论了同样的问题。发生这种情况是因为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>

于 2020-12-28T10:58:25.680 回答