方法來源於土豆網的導航，在這裡紀錄一下實現的思路。
主要是利用 position 屬性的 absolute 和 relative 配合 z-index 來實現的，通過position:absolute將需要平鋪的背景層疊在另一背景上，這樣即可以實現同一位置的兩個背景，再使用z-index將內容提升到最高階顯示。
<div id=”a”>
<div id=”b”>
<ul>
<li><a href=”http://www.prower.cn/category/internet”>互聯網談</a></li>
<li><a href=”http://www.prower.cn/category/interaction”>交互設計</a></li>
<li><a href=”http://www.prower.cn/category/technic”>技術言論</a></li>
</ul>
<div id=”c”></div>
</div>
<div id=”d”></div>
</div>
首先將其中一個背景樣式寫在<div id=”a”>上，然後是將另一個背景樣式寫在<div id=”d”>上，<div id=”b”>為內容層，<div id=”c”>是另一個背景樣式層，可以自由的出現在<div id=”b”>裡面的任何一個位置。如土豆網中間的那個有弧線的背景。
然後是樣式方面：
#a {background:#f00; height:50px; position:relative; width:100%;}
#b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;}
#c {background:#ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;}
#d {background:#f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;}
ul {line-height:50px; position:relative; z-index:9001;}
具體代碼參見：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]