Question

我用CSS实现了一个完整的非滚动背景图像。但是，当内容本身溢出页面时，不会出现滚动条，也无法看到内容。我尝试过在我的一些div中使用“overflow：scroll”的各种变体，但无济于事;滚动条出现但它们不滚动，或者不能正确滚动。我认为我的div可能存在结构性问题，但我对CSS没有特别的经验，并且在StackOverflow上找不到与此类似的线程。

http://jsfiddle.net/YXp5p/

<body>

<div id="bg">
    <img src="images/background.jpg">
</div>

<div id="wrapper">
    <div id="header">
        thread #6bUp0
    </div>

    <div id="sidebar">
        <div id="content">
            <div id="post">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat ante, placerat accumsan aliquam at, rhoncus eget nunc.
            </div>
        </div>
    </div>

</div>

</body>

body{
    margin: 0px;
    color: #000;
    font-family: helvetica, times;
    font-size: 16px;
}

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%;
    width:200%; 
    height:200%;
}
#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}

#wrapper {
    position: fixed;
    top:0%; 
    left:18%;
    width: 59%;
    height:200%;
    padding: 0%;
}

#header {
    background: url(images/header.gif) repeat-x;
    border: 1px solid black;
    width: 100%;
    height:29px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 6px;
    font-family: "Lucida Console", "Courier New", sans-serif;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}   

#sidebar {
    background-color: #EEEEEE;
    width: 100%;
    height: 100%;
    padding-left: 3%;
    padding-right: 3%;
    right: 3%;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

#content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    opacity: 1;
    padding-top: 8px;
}

#post{
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 5px;
    background-color: #FFF;
    opacity: 1;
}

Answer 1

您正在寻找background-attachment:fixed而非position:fixed您可以达到您想要的效果：

body{
    background-image:url('images/background.jpg');
    background-position:center top;
    background-attachment:fixed;
    margin: 0px;
    color: #000;
    font-family: helvetica, times;
    font-size: 16px;
}

哦，然后删除：

<div id="bg">
    <img src="images/background.jpg">
</div>

您文档的一部分。

全背景图片;内容不滚动

1 个答案: