如何用css使img元素视差？

Question

我想在 bootstrap-based 一侧实现视差。页面顶部是带图像的 header。带src-set img的图片更具体。

  <body>

  <header>
    <picture>
      <img
        class="main-img"
        sizes="(max-width: 1980px) 100vw, 1980px"
        srcset="
        /img/img-small.jpg   640w,
        /img/img-medium.jpg 1200w,
        /img/img-large.jpg  1980w
      "
      src="/img/img-medium.jpg"
    />
  </picture>
  <div class="header-content">
  ..
  </div>
</header>

<section ...>

在每个解决方案中，我看到背景设置在 css 背景之上：url(..)。这将丢失响应式图像加载。

是否可以使用此标记实现视差？

Answer 1

你可以混合使用 position:sticky 和 grid ，如果我明白你所说的视差是什么意思的话。

您的代码示例：（高度和 min-height 值是足够高的实际内容）

* {
  margin: 0;
}

header {
  display: grid;
  height: 200vh;
  min-height: 1200px;
}

picture img {
  position: sticky;
  top: 0;
}

picture,
.header-content {
  grid-row: 1;
  grid-column: 1;
}

.header-content {
  margin-top: 56%;
  /*to preserve space according to ratio image */
  border: solid;
  height: 50vh;
  transform: scale(1);
  z-index: 1;
  background: lightgreen;
}

picture img {}

<header>
  <picture style="width:100%;">
    <!-- calc(100vw - 1.2em) to mind a scrollbar -->
    <img class="main-img" sizes="(max-width: 1980px) calc(100vw - 1.2em), 1980px" srcset="
        https://dummyimage.com/640x380&text=small   640w,
        https://dummyimage.com/1280x720&text=medium 1280w,
        https://dummyimage.com/1980x1080&text=large   1980w
      " src="https://dummyimage.com/1200x600&text=medium" />
  </picture>
  <div class="header-content">
    .......
  </div>
</header>

另一种方法是在 header 之前获取图片：

* {
  margin: 0;
}

body {
  display: grid;
}

picture img {
  position: sticky;
  top: 0;
}

picture,
header {
  grid-row: 1;
  grid-column: 1;
}

header {
  margin-top: 56%;
}

.header-content {
  height: 100vh;
  background: tomato;
  border: solid;
  transform: scale(1);
  z-index: 1;
}

.header-content:nth-child(odd) {
  background: repeating-linear-gradient(45deg, transparent 3px, gray 6px, gray 7px), repeating-linear-gradient(-45deg, transparent 3px, gray 6px, gray 7px)
}
main section {height:100vh;background:#bed}

<picture style="width:100%;">
  <img class="main-img" sizes="(max-width: 1980px) calc(100vw - 1.2em), 1980px" srcset="
        https://dummyimage.com/640x380&text=small   640w,
        https://dummyimage.com/1280x720&text=medium 1280w,
        https://dummyimage.com/1980x1080&text=large   1980w
      " src="https://dummyimage.com/1200x600&text=medium.jpg" />
</picture>
<header>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>

</header>
<main> Main
  <section>Section</section>
</main>

图像缓慢向上的视差

 

body {
  perspective: 20px;
  perspective-origin: 0%;
  transform-style: preserve-3d;
}
* {
  margin: 0;
}
body {
  display: grid;
}
picture {
  transform-origin: 0 0;
  transform: translateZ(-2px) translatey(-5%);
}
picture img {
  position: sticky;
  top: 0;
  transform-origin: 0 0;
  transform: scale(1.1);
}

picture,
header {
  grid-row: 1;
  grid-column: 1;
}

header {
  margin-top: 56%;
}

.header-content {
  height: 100vh;
  background: tomato;
  border: solid;
  transform: scale(1);
  z-index: 1;
}

.header-content:nth-child(odd) {
  background: repeating-linear-gradient(45deg, transparent 3px, gray 6px, gray 7px), repeating-linear-gradient(-45deg, transparent 3px, gray 6px, gray 7px)
}
main section {height:100vh;background:#bed}

<picture style="width:100%;">
  <img class="main-img" sizes="(max-width: 1980px) calc(100vw - 1.2em), 1980px" srcset="
        https://dummyimage.com/640x380&text=small   640w,
        https://dummyimage.com/1280x720&text=medium 1280w,
        https://dummyimage.com/1980x1080&text=large   1980w
      " src="https://dummyimage.com/1200x600&text=medium.jpg" />
</picture>
<header>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>
  <div class="header-content">
    .......
  </div>

</header>
<main> Main
  <section>Section</section>
</main>

如何用css使img元素视差？

How to make img element parallax with css?

html

css

image

styling

parallax