CSS滑动门技术的简单应用

今天收到袁马飞读者的一个问题，我觉得比较有价值，可能不少学习CSS的读者都会遇到相似的问题。因此这里详细讲解一下。

他的问题是：

“ 我是一个热爱ＣＳＳ的读者，你们写的书我都看完，也跟着做完了！可是我有一个问题，就是你们书本上没有介绍到的。我画了一个ＴＯＰ图片，可是左边有一个花纹，右边也有一个花纹，中间还有一张底图图片， 还有文字标题，我不知道怎样用CSS定义的啊！ 所以就要请教一下你们了！ ”

我理解他的问题是希望在标题文字的下面有背景图像，比如这样：

前沿视频教室

对于这样的标题，如果标题宽度是固定的，那么就很简单，可以制作一个固定的背景图像，作为h1标记的background-image就可以了。

而如果标题宽度不固定，需要变化宽度，而同时保证花纹在左右两端，就麻烦一些，需要使用一种称为“滑动门”（Slide Door）的技术。例如下面的这个标题和上面的例子,宽度变化了，但是左右两端的花纹依然保持正确的效果。

前沿视频教室

这就是通过滑动门技术来实现的。所谓“滑动门”，就是两个嵌套的元素，各自使用一个背景图像，二者中间部分重叠，两端不重叠，这样，左右两端的花纹就可以都被显示出来，中间部分的宽度可以自动适应，因此宽度变化时，依然可以保证左右两端的图案不变。“滑动门”这个名称很形象地描述了这种方法的本质，两个图像就像两扇门，二者可以滑动，当宽度小的时候，就多重叠一些，宽度大的时候，就少重叠一些。

具体操作如下：

首先，为了“挂上”两个背景图像，需要两个HTML元素，因此在h3标记中间在嵌套一层span：

1

<h3><span>标题文字</span></h3>

然后，分别对h3和span的CSS样式进行设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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代码可以简写如下：

1
2
3
4
5
6
7
8
9
10
11
12

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设计彻底研究》书中，多次用到了滑动门技术来解决各种问题，核心就是解决需要适应宽度的问题。在制作导航菜单、为图像制作阴影、为页面布局设置背景色等很多地方，都有“滑动门”的用武之地。如果大家有兴趣，等书出版以后，可以参考一下。