CSS滑動門技術的簡單應用

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

他的問題是：

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

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

前沿視頻教室

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

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

前沿視頻教室

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

具體操作如下：

首先，為了“掛上”兩個背景映像，需要兩個HTML元素，因此在h3標記中間在嵌套一層span：

1	<h3><span>標題文字</span></h3>

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

1234567891011121314151617

h3{font-size:13px;line-height:21px;text-align:center;width:200px; /*修改這個值即可改變寬度，且保持兩端的花紋*/background-image:url(bg.gif);background-repeat:no-repeat;padding-left:40px;} span{display:block;padding-right:40px;background-image:url(bg.gif);background-repeat:no-repeat;background-position:right;}

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

 

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

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

大家如果還不十分清楚，可以點擊這裡查看滑動門效果，然後把檔案下載到您的電腦上，修改一下寬度，實驗一下效果。

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

123456789101112

h3{font:13px/21px;text-align:center;width:200px; /*修改這個值即可改變寬度，且保持兩端的花紋*/background:url(bg.gif) no-repeat;padding-left:40px;}span{display:block;padding-right:40px;background:url(bg.gif) no-repeat right;}

“滑動門”是一個非常有用的技術，可以用在很多很多地方，我們最近編寫的《CSS設計徹底研究》書中，多次用到了滑動門技術來解決各種問題，核心就是解決需要適應寬度的問題。在製作導覽功能表、為映像製作陰影、為頁面配置設定背景色等很多地方，都有“滑動門”的用武之地。如果大家有興趣，等書出版以後，可以參考一下。