CSS滑動門技術的簡單應用

今天收到袁馬飛讀者的一個問題，我覺得比較有價值，可能不少學習CSS的讀者都會遇到相似的問題。是以這裡詳細講解一下。

他的問題是：

“ 我是一個熱愛ＣＳＳ的讀者，你們寫的書我都看完，也跟着做完了！可是我有一個問題，就是你們書本上沒有介紹到的。我畫了一個ＴＯＰ圖檔，可是左邊有一個花紋，右邊也有一個花紋，中間還有一張底圖圖檔， 還有文字标題，我不知道怎樣用CSS定義的啊！ 是以就要請教一下你們了！ ”

我了解他的問題是希望在标題文字的下面有背景圖像，比如這樣：

對于這樣的标題，如果标題寬度是固定的，那麼就很簡單，可以制作一個固定的背景圖像，作為h1标記的background-image就可以了。

而如果标題寬度不固定，需要變化寬度，而同時保證花紋在左右兩端，就麻煩一些，需要使用一種稱為“滑動門”（Slide Door）的技術。例如下面的這個标題和上面的例子,寬度變化了，但是左右兩端的花紋依然保持正确的效果。

這就是通過滑動門技術來實作的。所謂“滑動門”，就是兩個嵌套的元素，各自使用一個背景圖像，二者中間部分重疊，兩端不重疊，這樣，左右兩端的花紋就可以都被顯示出來，中間部分的寬度可以自動适應，是以寬度變化時，依然可以保證左右兩端的圖案不變。“滑動門”這個名稱很形象地描述了這種方法的本質，兩個圖像就像兩扇門，二者可以滑動，當寬度小的時候，就多重疊一些，寬度大的時候，就少重疊一些。

具體操作如下：

首先，為了“挂上”兩個背景圖像，需要兩個HTML元素，是以在h3标記中間在嵌套一層span：

然後，分别對h3和span的CSS樣式進行設定：

可以看到，實際上二者是用的是同一個背景圖像，這個背景圖像如下所示。

關鍵的要點是，由于span元素在h3元素裡面，是以span的背景圖像在h3的背景圖像的上面。h3通過設定左側的padding露出左端的花紋。

而span通過background-position屬性，從右邊開始顯示背景圖像，這樣就可以露出背景圖像的右端了。

如果對CSS比較熟悉的話，上面的CSS代碼可以簡寫如下：