html - 如何将图像固定在站点的其余部分下？

Question

我看到了一个站点，bdplaw.com，它的图像（不是背景图像）固定在它们的框架中，因此该站点的其余部分构建在图像之上，并且当您滚动它时或多或少地显示图像在它的窗口内。

如何创建这种效果？我知道如何使背景图像静止，但这不是背景图像……但它似乎在其他所有内容的后面。

谢谢

Answer 1

这是效果的演示：http: //jsfiddle.net/ewnZY/2/

HTML

<div class="window" style="background-image: url(http://placekitten.com/500);"></div>

<div class="window" style="background-image: url(http://placekitten.com/800);"></div>

CSS

.window {
    width: 500px;
    height: 200px;
    background-attachment: fixed;
    margin-top: 1000px;
    margin-bottom: 1000px;
}

设置background-attachment为fixed意味着即使页面移动，图像也不会移动。想象一下将便利贴贴在显示器上并在后面滚动网页。那张便利贴不会去任何地方：P

Answer 2

下面是该站点的 CSS，它使该背景像那样工作。

background-image: url("http://www.bdplaw.com/content/themes/burnet-theme/img/xhome-bg1.jpg.pagespeed.ic.1DhW7PoqtC.jpg")

background-attachment: fixed;
background-position: 50% 0;
background-repeat: none;
position: relative;