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>溢出<header>并且我似乎无法做任何事情。

我正在尝试使用元素执行此操作，因为我希望图像具有响应性，但我宁愿不使用JS。

谢谢。

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>

似乎有效。不过，我不确定它有多兼容。

使用附件模拟背景图像：使用<picture>修复

1 个答案: