Question

我的web pages有一个无聊的白色背景，所有内容（网站徽标和几个谷歌图表）的固定宽度 700px 并居中：

    h1,h2,h3,p,div,form { 
    text-align: center; 
}

我想在下面添加一个垂直平铺的png图像（只是 1px 高度的条纹），这将显示固定宽度 800px 的白色和休息应该是一些其他颜色（如下例中的红色）或渐变，应该增长页面宽度：

enter image description here

如何使用CSS或HTML做到最好（即最可靠和大多数浏览器）？

Answer 1

您需要将内容放入800px的容器中，以实现红色或渐变背景和条纹PNG效果。所以你的所有内容都将进入.container div，你的风格将是：

body{
   background:#ff0000;
}

.container{
    width:800px;
    margin:0 auto;
    position:relative;
    background:url('/path/to/image/image.png') repeat 0 0;
}

因此，当前显示在body标记中的所有内容都必须放在.container div标记中，如下所示：

<body>
    <div class='container'>
        <p></p>
        <h3></h3>
        .....
    </div>
</body>

理想情况下，如果您的最低屏幕分辨率为800 x 600，则.container宽度应小于800，以避免使用水平滚动条。

您可能还会发现以下链接在尝试创建跨浏览器渐变和PNG时非常有用：

条纹生成器 - http://www.stripegenerator.com/
CSS渐变创建者 - http://www.colorzilla.com/gradient-editor/

上面的渐变创建器使用CSS创建渐变，并且还支持IE。然而，在IE中，由于渐变是使用IE滤镜创建的，因此它倾向于剪切隐藏在其中的任何内容，而不是允许它溢出。您也可以随时使用图像来创建渐变。

您可能还想考虑使用CSS PIE，以实现IE兼容性 - http://css3pie.com/

希望这有帮助。

Answer 2

如果您想添加 1px高度图片作为背景，请找到以下代码

/*CSS*/
 body
 {background:#ff0000;}

 .main
 {
  text-align:center; 
  width:800px; 
  background-image:url('http://i.stack.imgur.com/LNBYu.png');
  background-repeat:y-repeat;
  background-position:center;
  min-height:300px;
 }

/*HTML*/
<body>
<div align="center">
  <div class="main">
     Your Content Goes Here       
  </div>
</div>
</body>

你可以看到如下结果....（这里我垂直重复1px高度图像，所以你可以看到你的背景充满了图像）

enter image description here

或Click here to See the Result

希望这对你有所帮助!!除此之外的任何其他问题，请做评论！

如何显示固定宽度的居中背景

2 个答案: