Question

我一直试图阻止我的背景图像扩大身体的高度，没有成功。我想只在内容增加时才扩展主体，而不是我的背景图像。

以下是代码段：

body
{
    background-color: #000000;
    color: #FFFFFF;
    font-family: Georgia, Verdana, Geneva, sans-serif;
    overflow-x: hidden;
}

#background_container img
{
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -1250px;
    z-index: -10;
}

<body>



                <div id="background_container">

                    <img src="_images/main_background.jpg" width="2500" height="2003">

                </div>

                <div> 

            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 

            </div>

</body>

它应该有效，所以当我有更多内容时，身体的高度才会扩展，并且在此之前不会有滚动条。

我根本不想使用任何javascript。

提前致谢

Answer 1

试试这个css：

body
{
    background-color: #000000;
    color: #FFFFFF;
    font-family: Georgia, Verdana, Geneva, sans-serif;
    overflow-x: hidden;
}
body > div
{
    background-image: url(_images/main_background.jpg);
    background-position: top center;
}

用这个html代替

<body>
        <div> 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        </div>
</body>

DEMO - 我在演示中使用了一些外部图像，因为我无法猜测你用于背景的内容。我添加了contenteditable到div并使用javascript集中它，这样你就可以开始输入，看看当div增大时背景如何扩展。

css防止图像形式扩大身高

1 个答案: