三列布局：固定寬度中心，帶流體側柱

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;
 }

演示上述技巧

Answer 4

有幾個博客已經討論過這個問題，包括Perfect Multi-Column CSS Liquid Layouts 。 我敢肯定，如果你仔細閱讀（這真的很有趣），你將能夠根據自己的需要進行調整，如果還沒有這樣做的話。

Answer 5

你能用這樣的東西嗎？ 如果你認為這就是你正在尋找的東西，我可以解釋得更多。

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