Html 如何有效地伪造div'；在body元素中使用图像的背景色？_Html_Css_Image_Background

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

html css image

Html 如何有效地伪造div'；在body元素中使用图像的背景色？,html,css,image,background,Html,Css,Image,Background,我想得到如下结果：深灰色是侧边栏，但我想将该颜色应用到身体元素中，作为一个垂直重复的图像，但同时不覆盖页脚（浅灰色）（这是我发现的将颜色（深灰色）拉伸到底部的最简单方法。）我的CSS的一部分： body { color: #888; font-family: Arial, "MS Trebuchet", sans-serif; font-size: 75% } .container { margin: 0 auto; overflow: hidd

我想得到如下结果：

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

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

我的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>


Alex Chen-网络开发、平面设计和翻译

您可以使用图像来伪造背景，或者这里有一个不错的CSS解决方案-

#容器{溢出：隐藏；}
#容器分区{浮动：左；背景：#ccc；宽度：200px；边距底部：-2000px；填充底部：2000px；}
#container.col2{背景：#eee；
内容1
内容2
内容2
内容2
内容2

我认为你需要重新表述这个问题。我认为你需要学习编写CSS。

#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>