Как эффективно подделать цвет фона div, используя изображение в элементе body? - PullRequest
Новая
       10

Как эффективно подделать цвет фона div, используя изображение в элементе body?

0 голосов
/ 04 мая 2010

Я хочу получить что-то вроде следующего:

альтернативный текст 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>

1 Ответ

0 голосов
/ 05 декабря 2011

Вы можете сделать это, используя изображение для подделки фона, или здесь есть хорошее решение 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...