Question

问题是，我有两个部分的背景。

Background Image #1
Background Image Repeats (endlessly) #1
Background Image #2
Background Image Repeats (endlessly) #2

在CSS中，你不能像上面那样粘贴元素来创建背景：

#leftColumn {
    background-image:url('http://i53.tinypic.com/2ezlb7n.png');
    background-repeat:no-repeat;
    background-position:right top;
    background-z-index:1;    

    background-image:url('repeat.png');  
    background-repeat:repeat-x;  
    background-z-index:0;
}

我想要的结果是什么：

[ BACKGROUND LEFT ]
[ CONTENT ] 
[ BACKGROUND RIGHT ]

内容应始终为768px。双方的背景应该尽可能多地显示出来。

我无法相信，但我能够自己解决它。这是使其成为可能的代码：

<style type="text/css">
* {
    padding:0px;
    margin:0px;
}

html, body {
    width:100%;
    height:100%;
    background-color:#333333;
}

#leftColumn {
    background-image:url('http://i54.tinypic.com/aa83lw.png');  
    background-repeat:repeat-x;  
    display:none;   
}

#rightColumn {
    background-image:url('http://i52.tinypic.com/kcjdwi.png');  
    background-repeat:repeat-x; 
    display:none;   
}

#leftImage {
    background-image:url('http://i53.tinypic.com/2ezlb7n.png');
    background-repeat:no-repeat;
    background-position:right;
    width:100%;
    height:128px;
}

#rightImage {
    background-image:url('http://i56.tinypic.com/noh6on.png');
    background-repeat:no-repeat;
    width:100%;
    height:128px;
}

#content {
    width:768px;
    background-color:#666666;
}

@media only screen and (min-width:769px) {

    #leftColumn, #rightColumn {
        display:table-cell;
    }

}

</style>

<table width="100%" height="100%">
<tr>
    <td id="leftColumn" align="right"><div id="leftImage"></div></td>
    <td id="content">&nbsp;</td>
    <td id="rightColumn" align="left"><div id="rightImage"></div></td>
</tr>
</table>

Answer 1

我想想你想要在中心有一个内容区域，背景横跨宽度，无论它有多宽。

HTML：

<div id="wrapper">
    <div id="content">your center content goes here</div>
</div><!-- close wrapper -->

CSS：

#wrapper {
    background: #FFF url(/images/widebackground) repeat-x center top;
}

#content {
    margin: 0 auto; /*centers div - change the 0 if you want a different top margin*/
    width: 768px;
}

这将水平重复您的背景。它将在窗口中居中。如果你的图像足够宽（4000像素，可能？），你不可能在没有多个显示器的任何显示器上看到它重复。您还可以为未垂直覆盖的任何区域设置颜色，或通过透明区域显示颜色。我将其设置为#FFF，但您可以选择颜色或将其保留。

这是一个jsfiddle，展示了我的建议。我更改了一些内容（颜色，内容大小）以使其更加醒目，但关键部分仍然存在。

Answer 2

这将在ff中执行，但在Chrome，sarafi或IE中不起作用。

所以对你来说可能没什么好处！：）

<html>
<head>

<style>
    body
    {
        display:table;
        width:100%;
        padding:0px;
        margin:0px;
    }
    .centre
    {
        display:table-cell;
        height:400px;
        width:768px;
        text-align:left;    
        margin:0px auto;
        position:relative;
        background-color:#FF0000;
    }
    .left
    {
        display:table-cell;
        background-color:#00FF00;
    }
    .right
    {
        display:table-cell;
        background-color:#0000FF;
    }
</style>

</head>
<body>
    <div class="left"></div>        
    <div class="centre">
        <p>This is the centre content</p>
    </div>
    <div class="right"></div>


</body>
</html>

CSS动态左/右列静态宽度

2 个答案: