三列布局:固定宽度中心与流体侧列 [英] Three column layout: fixed width center with fluid side columns

问题描述

我正在尝试在 CSS 中实现一种设计，该设计将在身体.我想在内容背景中使用 png 图像作为椭圆形身体背景上的不透明蒙版.侧栏(和一个支撑的页脚带有剪切溢出)将有一个部分不透明的黑色背景，将匹配 .png 蒙版的边缘.

I'm trying to implement a design in CSS that will have a tiled background on the body. I want to use a png image in the content background as an oval-shaped opacity mask over the body background. The side columns (and a propped footer with clipped overflow) will have a partially opaque black background that will match the edges of the .png mask.

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

The intention is to have a fixed dimension center area with a complex background pattern that will fill any size browser window.

我想不出我会如何做到这一点.margin:auto 似乎不会足以满足我的背景要求，我认为我无法添加大型固定支柱到侧柱而不会失去我的居中.

I can't think how I would pull this off. margin:auto does not seem like it will be sufficient for my background requirement and I don't think I can add a large fixed prop to the side-columns without losing my centering.

这是布局的粗略模型.

推荐答案

根据你的screenshot 你可以这样写:

As per your screenshot you can write like this:

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

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

更新:

根据您的问题解决三列布局:固定宽度中心与流体侧列

但它适用于现代浏览器

更新

适用于所有浏览器

这篇关于三列布局:固定宽度中心与流体侧列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！