html - CSS 动态左/右列静态宽度

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 ]

内容应始终为 768 像素。两边的背景尽量显示出来。

---

我不敢相信，但我自己解决了。这是使之成为可能的代码:

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

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

这是一个 jsfiddle证明我的建议。我更改了一些内容(颜色、内容大小)以使其更明显，但关键部分仍然存在。