调整窗口大小后，css 背景修复失败

Question

我花了几个小时试图让背景固定在中间。我希望你能指出我在哪里犯了愚蠢的错误。

我的代码

#main_inside{
        float:right;
        margin-top:223px;
        width:700px;    
        background:url("images/gidas.png") no-repeat fixed 496px 259px transparent;
        margin-bottom: 86px;
    }

问题是当我使用 crtl + 滚动调整窗口大小时。图像消失了。

我也试过:

background-position:center;

并尝试了这个:

background-origin:content-box;

并尝试使用 % 设置图像距离。

真题网址http://lyderiai.net/tg2013/gidas.php

Answer 1

当您使用“fixed”时，您将图像固定到网站的视口(viewport)(也称为窗口)，因此例如，如果您将其设置为“background-position: left 0”，它不会占用 div左侧位置，但窗口左侧位置。这就是为什么当您调整窗口大小时，图像会移动的原因。