Question

我希望得到以下内容：

alt text http://img689.imageshack.us/img689/3225/mockupu.png

深灰色是侧边栏，但我想将这种颜色应用到身体元素中，作为垂直重复但同时不覆盖页脚（浅灰色）的图像。

（这是我发现将颜色（深灰色）拉伸到底部的最简单方法。）

我的CSS的一部分：

body {
    color: #888;
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-size: 75%
}
.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    width: 960px;
}
/* header */
#header {
    background: #444;
}

/* banner */
#header-top {
    overflow: hidden;
    height: 77px;
    width: 960px; /* ie6 hack */
}
#lang {
    float: right;
    padding: 50px 0 0 0;
}

/* work */
#content {
    background: #EEE;
}
#content a {
    border-bottom: 0;
}
#mainbar {
    overflow: hidden;
    margin: 0 10px 0 0;
    width: 644;
    float: left;
}

#sidebar {
    background: #DDD;
    color: #777;
    overflow: hidden;
    margin: 20px 0 10px 0;
    padding: 15px;
    width: 240px;
    float: right;
}
#sidebar h3 {
    color: #888;
}
#about {
    margin: 0 0 20px;
}
/* footer */
#footer {
    color: #777;
    background: #DDD;
    clear: both;
}

/* contact */
#footer-top {
    line-height: 160%;
    overflow: hidden;
    padding: 30px 0;
    width: 960px; /* ie6 hack */
}

#footer-bottom {
    font-size: 10px;
    margin: 15px auto;
}

我的部分HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>Alex Chen - Web Development, Graphic Design, and Translation</title>
    <link rel="stylesheet" type="text/css" href="styles/global.css" />
</head>
<body id="home">
<div id="header">
    <div class="container">
        <div id="header-top">

        </div>
    </div><!-- .container -->
</div><!-- #header -->
<div id="content">
    <div class="container">
        <div id="mainbar">


        </div> <!-- #mainbar-->
        <div id=sidebar>

        </div> <!-- #sidebar -->
    </div><!-- .container -->
</div><!-- #content -->
<div id="footer">
    <div class="container">
        <div id="footer-top">

        </div><!-- #footer-top -->
        <div id="footer-bottom">

        </div>
    </div><!-- .container -->
</div><!-- #footer -->

</body>
</html>

Answer 1

您可以使用图片伪造背景，或者这里有一个很好的CSS解决方案 - http://jsfiddle.net/spacebeers/s8uLG/2/

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee;

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

如何使用body元素中的图像有效地伪造div的背景颜色？

1 个答案: