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