Question

我正在尝试在CSS中实现一个具有平铺背景的设计身体。我想在内容背景中使用png图像作为椭圆形在身体背景的不透明面具。侧柱（和支撑脚）具有剪裁溢出）将具有部分不透明的黑色背景匹配.png蒙版的边缘。

目的是建立一个具有复杂背景的固定维度中心区域将填充任何大小的浏览器窗口的模式。

我想不出我会怎么做。 margin:auto似乎不会足以满足我的背景要求，我认为我不能添加大型固定支柱到侧柱而不会失去我的中心。

Answer 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

解决方案

http://jsfiddle.net/XMg2h/3/

但它可以在现代浏览器中使用

<强>已更新

http://jsfiddle.net/XMg2h/10/

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

Answer 2

我使用绝对定位来解决问题。我感谢任何评论。

http://jsfiddle.net/tupCS/12/

我尝试使用浮点数和负边距，但背景重叠，这不起作用，因为我需要这个用于背景蒙版，重叠会导致蒙版之间出血。

我的解决方案还将背景列分隔为自己的div。然后，我可以隐藏此div的溢出，而不是为内容隐藏它。这允许滚动条仅在窗口小于内容时出现。

Answer 3

使用此CSS平铺背景图像：

 body{
      background:url(wallpaper.png);
 }

将'椭圆形阴影'变成半透明的.png并将其切成四块。使用绝对定位的伪元素将片段附加到文档的角落。

 body:before{
      content:''; 
      display:block; 
      background:url(oval-shadow-top-left:.png);
      position:absolute; 
      top:0; left:0; 
      height:300px; width:400px;
}

为每个角落执行此操作（您可以使用任何元素的伪元素，只要它没有相对定位）。

将div居中，并给它z-index以确保它位于伪元素之上。

 div{
      width:300px; height:200px; 
      margin: 50% auto; 
      position:relative; 
      z-index:100;
      top:-150px;
 }

Demo of above techniques

Answer 4

有几个博客讨论过此问题，包括Perfect Multi-Column CSS Liquid Layouts。我敢肯定，如果你仔细阅读（这真的很有趣），你将能够根据自己的需要调整它，如果还没有这样做的话。

Answer 5

你能用这样的东西吗？如果你认为这就是你正在寻找的东西，我可以解释得更多。

http://jsfiddle.net/Wexcode/Atjtt/

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

5 个答案:

http://jsfiddle.net/XMg2h/3/

http://jsfiddle.net/XMg2h/10/