如何在网站的其余部分修复图像？

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;