html - 固定在窗口上，但包含在容器内

Question

我有一些 HTML 设置如下:

<div class="mediasection large">
    <div class="cover" style="background-image: url(/media/images/panorama.jpg);"></div>
    <div class="overlay">Welcome!</div>
</div>

封面元素使用 background-attachment: fixed; 来创建视差效果。我想要实现的是让覆盖元素以相同的方式运行，其中的文本固定到视口(viewport)，但仍包含在 mediasection div 中，这样当用户滚动页面时，封面和覆盖保持在相同的位置，但随着 mediasection 元素离开 View 而消失。

有什么办法可以实现吗？

tl；博士；某种 background-attachment: fixed; 到常规元素，而不仅仅是背景。

谢谢!

Answer 1

老实说，我认为最简单的方法就是使用 photoshop/[你最喜欢的图像编辑软件] 将叠加文本放在背景图像上。我做了 this jsfiddle这有望展示您想要的行为。

HTML

---

<div class="media-screen">
    <h1 class="sr-only">Overlay Text</h1>
    <p class="sr-only">With an interesting paralax effect</p>
</div>

其中 sr-only 是一个在视觉上隐藏元素的类，而 maintaining screen reader accessibility

CSS

---

.media-screen {
    position: relative;
    height: 250px;
    background-image: url('path/to/your/image.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.sr-only { 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; width: 1px; 
    margin: -1px; padding: 0; border: 0; 
}

移动支持

---

如果您支持多种屏幕尺寸，您可能需要几个不同版本的图像以适应不同的方向。您可以使用媒体查询来替换为各种尺寸/方向显示的图像

/*Example media query for view port width*/
@media screen only and (min-width: 1024px){
    .media-screen {
        background-image: url('path/to/your/image-large.png');
    }
}

/* Example media query for view port orientation */
@media screen only and (orientation: portrait){
    .media-screen {
        background-image: url'path/to/your/image-narrow.png');
    }
}

---

注意:在背景图片中嵌入内容显然意味着内容不是交互式的，因此这仅对基本显示元素有用。