使用<picture>模拟带有attachment：fixed的背景图像

Question

我试图使用 <picture> 元素创建一个响应式的页眉，它的行为类似于带有固定附件的背景图片。我这样做的原因是可以在不同的页面上指定不同的图像。以下是简化的HTML代码。

<header>
    <picture>
        <source srcset="sm.jpg">
        <source srcset="md.jpg">
        <source srcset="lg.jpg">
        <img src="/assets/images/md-fraye.jpg">
    </picture>
    <h1>Heading</h1>
</header>

什么CSS样式可以让图片保持在头部内但随着页面向上滚动而固定，并在头部消失时消失？我尝试使用position:fixed和z-index:-1，但是这会导致超出

的范围，我似乎无能为力。

我想通过< picture >元素实现这个效果，因为我希望图片具有响应性，但我不想使用JS。

谢谢。

- Marc Trius

Answer 1

这是我最终的做法：

.cover, .content, {
  max-width: 16rem;
  margin: auto;
  padding: 1rem 2.5rem 1rem 1.5rem;}

.content {
  background-color: white;}

.cover img {
  position: fixed;
  z-index: -1;
  width: 20rem;
  top: 0;
  left: calc(50% - 10rem); 
  @media only screen and (max-width: 20rem) {
    width: 100%;
    left: 0;
  }
}

还有HTML代码：

<header class="cover">
  <picture>
    <source="image-sm.jpg">
    <img src="image.jpg">
  </picture>
  <h1>Title</h1>
</header>
<main class="content">
some content
</main>

看起来可以工作。但我不确定它有多兼容。

- Marc Trius