我试图使用 <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。
谢谢。