CSS 重复渐变背景答案

【问题标题】：CSS repeat gradient backgroundCSS 重复渐变背景
【发布时间】：2014-05-08 18:04:39
【问题描述】：

我想知道如何使渐变背景在定义的布局之外重复。

http://i.imgur.com/CYk2FiE.png

需要重复水绿色和橙色，这也是渐变。

谢谢。

【问题讨论】：

不是渐变带只是跨越整个页面的一些元素（如div）吗？如果是这样，您可以使用带有适当颜色停止的线性渐变。
对于任何分辨率都需要重复黑色以外的部分（左右）。

标签： css background repeat

【解决方案1】：

<body>
    <div id="header" style="width:1316px;height:80px;">
        <div style="width:150px;height:72px;background-color:white;float:left;">repeat</div>
        <div id="header-internal" style="background-color:gray;float:left;">
            1016px 
        </div>
        <div style="background-color:white;width:150px;height:72px;float:left;">repeat</div>
    </div>
    <div id="content">
        what repeat background header left and right? two colors different?
    </div>
    <div id="footer">
        footer
    </div>
    <br /> <br /> <br />
    Should look like:
    <img src="http://i.stack.imgur.com/KCbiK.png" />
</body>

而 Css 将是

 body {
    margin:0;
    padding:0;
}
#header {
    background:url("http://s10.postimg.org/jfhegkq49/bg_center.jpg") no-repeat;
    background-position: bottom center;
    background-color: #EFEFEF;
background-size:100%;
    height: 80px;
}

#header-internal{
    margin: 0 auto;
    height: 72px;
    width: 1015px;
}

#footer {
    background-color: red;
    height: 80px;
    margin-top:20px;
}

【讨论】：