三列布局：固定宽度的中心，带有流体侧列

小编典典

css

我正在尝试在CSS中实现一个设计，该设计在主体上具有平铺的背景。我想在内容背景中使用png图像作为主体背景上的椭圆形不透明蒙版。侧栏（以及带有修剪过的溢出的支撑的页脚）将具有部分不透明的黑色背景，与.png蒙版的边缘匹配。

目的是要有一个具有复杂背景图案的固定尺寸中心区域，该背景图案将填充任何大小的浏览器窗口。

我想不出该怎么做。margin:auto似乎不足以满足我的背景要求，并且我认为我可以在不丢失居中位置的情况下向侧栏添加大型固定支柱。

阅读 259

2020-05-16

共1个答案

小编典典

根据您的要求，screenshot您可以这样编写：

body{
 background: url(image.jpg) repeat center center;
}

.container{
  width:500px;
  margin:0 auto;
}

更新：

根据您的问题解决 Three column layout: fixed width center with fluid side columns

但这在现代浏览器中有效

更新

在所有浏览器中都可以使用

2020-05-16