Question

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

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

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

谢谢。

Answer 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;
}

CSS重复渐变背景

1 个答案: