随笔 - 3444, 文章 - 0, 评论 - 739, 阅读 - 1117万
  管理

CSS滑动门技术的简单应用

Posted on   lzhdim  阅读(1565)  评论(1编辑  收藏  举报

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

他的问题是:

“ 我是一个热爱CSS的读者,你们写的书我都看完,也跟着做完了!可是我有一个问题,就是你们书本上没有介绍到的。我画了一个TOP图片,可是左边有一个花纹,右边也有一个花纹,中间还有一张底图图片, 还有文字标题,我不知道怎样用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设计彻底研究》书中,多次用到了滑动门技术来解决各种问题,核心就是解决需要适应宽度的问题。在制作导航菜单、为图像制作阴影、为页面布局设置背景色等很多地方,都有“滑动门”的用武之地。如果大家有兴趣,等书出版以后,可以参考一下。

编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
2025年1月30日 星期四 【蛇】戊寅月己亥日 乙巳年 一月初二
您的IP:3.139.239.163,操作系统:未知操作系统,浏览器:未知浏览器
Copyright (C) 2000-2025 Lzhdim Software All Rights Reserved
点击右上角即可分享
微信分享提示