1

我试图一个接一个地定位一个 div，当 div 相对定位时很容易实现，但我希望每个 div 都适合浏览器的大小。
我使用这种方法非常粗略地实现了它：

<div id="container">
<div id="test-1" style="background: url(../images/background-v2.jpg)"></div>
<div id="test-2" style="background: url(../images/background-v2.jpg)"></div>
</div>

CSS：

#test-1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#test-2 {
    position: absolute;
    top: 101%;
    left: 0px;
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

所以#test-1 缩放以适应浏览器的大小，然后当你缩小时#test-2 也适合浏览器的大小，依此类推。但是我通过绝对定位它们并从顶部设置 #test-2 101% 来实现这些目标，我不想每次添加另一个 div 时都这样做，因此我希望它们相对定位同时仍然保留浏览器背景图像的比例。如果那是可能的？它可能需要jQuery吗？
我完全被这个难住了！

这些背景图像还有其他一些我无法弄清楚的东西，因为它们嵌套在 div 中，当浏览器尺寸低于大约 750px 宽度时，背景图像变得固定，无论如何它们可以始终保持居中到浏览器，

4

2 回答 2

0

我没有使用背景图片，因为我不确定你在用它们做什么，但这里有一个使用 jQuery 解决大小问题的解决方案：

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <style>
            .fill-browser{
                width:100%;
            }
        </style>
        <!-- uncomment the line below to include jquery, I had to comment it out for stackoverflow -->
        <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script-->
        <script>
            $(function() {
                Resize();
            });

            //Every resize of window
            $(window).resize(function() {
                Resize();
            });

            //Dynamically assign height
            function Resize() {
                // Handler for .ready() called.
                var windowHeight = $(window).height() + 'px';
                $('.fill-browser').css('height', windowHeight);
            }
        </script>
    </head>

    <body>
        <div class="fill-browser" style="background-color:#aa0000;"></div>
        <div class="fill-browser" style="background-color:#00aa00;"></div>
        <div class="fill-browser" style="background-color:#0000aa;"></div>
    </body>
</html>
于 2013-01-23T00:31:22.853 回答
0

您可能还想查看 - http://srobbin.com/jquery-plugins/backstretch/ 这是一个 jQuery 插件，可以轻松拉伸背景图像。

于 2013-01-23T02:16:49.000 回答