Question

如何只在网站布局的一侧无限重复背景颜色/图像并保持内容居中？

最好的方法似乎是使用表格，因为它甚至可以在IE6中运行，但是有没有一种方法可以在没有表格和javascript的情况下完成这项工作并至少在IE7 +中工作？

divs / display：table的方法根本不适用于IE，

<style type="text/css">

*{
margin:0;
padding:0;
}

/* table method */

.table-container{
margin-top:20px;
border:0;
border-collapse:collapse;
width:100%;
height:100px;
}

.table-container .left{
background:transparent;
}

.table-container .center{
width:960px;
background:#ddd;
vertical-align:top;
}

.table-container .center div{
margin:0 auto;
width:960px;
}

.table-container .right{
width:auto;
background:#ccc;
}

/* div method */

.div-container{
display:table;
margin-top:20px;
border:0;
width:100%;
height:100px;
}

.div-container .left{
display:table-cell;
background:transparent;
}

.div-container .center{
display:table-cell;
width:960px;
margin:0 auto;
background:#ddd;
vertical-align:top;
}

.div-container .right{
display:table-cell;
width:auto;
background:#ccc;
}

</style>


<table class="table-container">
<tr>
<td class="left">&nbsp;</td>
<td class="center"><div>Table method : This space must be centered</div></td>
<td class="right">&nbsp;</td>
</tr>
</table>

<div class="div-container">
<div class="left">&nbsp;</div>
<div class="center">Div method : This space must be centered</div>
<div class="right">&nbsp;</div>
</div>

Answer 1

使用绝对位置可以实现半屏幕背景颜色等炫酷效果。与使用display: table布局相比，有更简单的方法来居中文本 - 我也在CSS中显示了这种布局。

Here is a working examnple on JSFiddle我已尽力在下面的评论中解释CSS。

以下是代码：

CSS

.content {
    margin: auto;         //use these to center the content
    position: relative:   //position relative, so the absolute div is positioned relative to this div
    text-align: center;   //use these to center the content
    width: 60%;
}

.content p {
    position: relative;   //position relative so we can set a z-index
    z-index: 1;           //z-index is higher than that of the background so it appears above  
}

.background {
    background-color: #777;
    height: 100%;
    left:0;               //we want the left of the div to be 0px from the left of its container div
    position: absolute;   //position absolute, so we can put it anywhere we want
    top: 0;               //we want the top of the div to be 0px from the top of the container div
    width: 50%;
    z-index: 0;           //we want the z-index to be lower than the text
}

HTML

<div class="content">
    <p>...text...</p>
    <div class="background"></div>
</div>

享受

Answer 2

这是一种更新的方法（旧答案来自2011年6月）。所有主流浏览器现在支持多个背景图像。

使用多个背景图像和css计算，您可以在您想要的一侧重复y。所以，这是你可以做的：

.full-width-container{
  background-image:
    url('some_long_image_600Wx100H.jpg'),
    url('some_long_image_600Wx100H.jpg');
  background-position:
    calc(50% + (600px * 0.5)) 0;
    calc(50% + (600px * 1.5)) 0,
    ;
  background-repeat: repeat-y;
}

注意： 600px是图像的宽度。以上示例将覆盖1200px的屏幕，或2400px宽显示器的左半部分。

理想情况下，您的图像相当宽，因此您不必拥有如此多的重复使用的背景图像。如果你的图像只有300像素宽，那就像这样。

.full-width-container{
  background-image:
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg');
  background-position:
    calc(50% + (600px * 0.5)) 0;
    calc(50% + (600px * 1.5)) 0,
    calc(50% + (600px * 2.5)) 0,
    calc(50% + (600px * 3.5)) 0,
    ;
  background-repeat: repeat-y;
}

我也不确定多个bgs的负载如何，即使使用相同的图像也会影响您的帧速率。我想象它会很小。

背景只在网站布局的一侧重复，内容居中？

2 个答案:

CSS

HTML