我有web pages具有无聊的白色背景，其所有内容(网站 Logo 和几个谷歌图表)都是固定宽度 700px 并居中:
h1,h2,h3,p,div,form {
text-align: center;
}
我想在下面添加一个垂直平铺的 png 图像(只是一个 1px 高度的条纹)，它将显示固定宽度 800px 的白色和其余的应该是其他颜色(如下例中的红色)或渐变，并且应该增长 页面宽度:
如何使用 CSS 或 HTML 做到最好(即最可靠且对大多数浏览器而言)？
最佳答案
您需要将您的内容放入一个 800 像素的容器中，以实现红色或渐变背景和条纹 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/
希望这对您有所帮助。
关于html - 如何显示固定宽度的居中背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9139762/