WEB入门.八 背景特效
学习内容
- background属性
- CSS Sprite 技术
- 滑动门技术
能力目标
- 使用background设置网页背景
- 使用Sprites制作平滑投票特效
- 使用滑动门技术实现Tab菜单
本章简介
在前面章节中，已经系统地讲解了页面设计中常见的布局模型，主要内容涉及到流动模型和浮动模型。理解了如何在盒子模型的基础上，使用流动模型与浮动模型设计出如网易、淘宝等大型门户网站的页面布局。
一个完整的页面在完成布局设计后，需要增强页面的内容及视觉表现效果。本章将讲解如何使用background属性为页面添加背景，实现页面背景平铺以及背景定位功能。另外，本章内容将讲解如何使用页面图片整合技术减少客户端对服务器的请求；制作论坛的平滑投票特效；使用滑动门技术实现背景随着内容多少自适应的效果，完成页面Tab导航菜单。4.1 background属性
在传统的页面设计中，设计师使用 img标签向网页中添加大量的图像，这种做法导致服务器处理客户端的请求增多，页面加载速度变慢。为了减少页面上的背景图片数量，可以使用 CSS Sprites将多张小图片整合到一张图片中，再使用 background进行背景图像定位显示来提高页面加载速度。所以对于网页固定位置上的图片，应尽量使用 CSS 的 background属性进行设置，减少img标签的使用。
以下介绍 background 属性常用参数的用法，包括 background-image、background-repeat、background-position等。
4.1.1 background-image 属性
背景图像background-image属性用来定义图像背景路径。
background-image： none |url ( url )
取值说明：
none：默认值，无背景图。
url (url)：使用绝对或相对url地址指定背景图像。
4.1
CSS代码：
XHTML代码片段：
4.1.1 background-repeat 属性
设置元素中背景图像的重复方式，制作重复的背景图像。
background-repeat : repeat ｜ no-repeat｜repeat-x ｜ repeat-y
取值说明：
repeat：默认值，背景图像在纵向和横向上平铺。
no-repeat：背景图像不平铺。
repeat-x：背景图像仅横向平铺。
repeat-y：背景图像仅纵向平铺。
4.2
CSS代码：
XHTML代码片段：
精美台历
4.3
#book{
margin:100px;
background-image:url(images/vrepeat.jpg);
background-repeat:repeat-y;
width:600px;
height:400px;
border:3pxdouble gray;
}
在浏览器中的运行效果如图 4.1.3所示。
4.1.1 background-position 属性
background-position属性用来设置背景的起始位置。
background-position： length ｜ length
background-position： position ｜ position
取值说明:
length：百分数｜长度值。
position：top｜center｜bottom｜left｜center｜right。
（1） 默认值为 0%、0%，此时背景图片将被定位在对象不包括边距(padding)的内容区域左上角。100%、100%此时背景图片将被定位在对象不包括内边距的内容区域右下角。
（2） 指定 1 个值，该值为横坐标，纵坐标默认为 50%。
（3） 指定2个值，其中第一个值为横坐标，第二个用于纵坐标。
（4） 设置值为 right center，因为 right作为横坐标值会覆盖center值，背景图片将居右定位。
（5） postion可以取负值，positionX取负值时表示背景图像向左移动，positionY取负值时表示背景图像向上移动。
（6） position 的值可以取百分比，此时图像的移动方向由另一个值的方向决定。如background-position；100% -50px；时. 其含义是向 X轴左方向移动，保证图像的右侧位置与元素的右侧重合，在Y轴方向上移动 50px。
4.4
CSS代码：
XHTML代码片段：
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。
background-position:100%100%; /* 背景位置，百分比 */
background-position:right center; /* 背景位置 */
background-position:0% 20px; /* 背景位置，百分比 */
background-position:100% -42px; /* 背景位置，百分比 */
下面通过一个综合案例演示一下background属性的用法。
4.5
CSS代码：
XHTML代码片段：
初始状态下，超链接背景位置设置成 background-position：l00pxl00px，而它的大小是l00px*l00px，所以超链接背景超出可视范围而无法显示时，黑白照片成为ul的背景图像；当鼠标移动到超链接上，根据超链接设置的背景位置移动背景，形成黑白与彩色图片交替效果，如图4.1.6所示。
注意以每个图片的左上角为0 ，0点；
4.1 滑动门技术
4.1.1 什么是滑动门技术
滑动门概念来源于生活中的推拉门，它通过改变重叠区域的大小来改变占据的空间。在页面设计中，通常利用滑动门原理制作导航菜单，导航栏会根据文本自适应大小，进行滑动。
可以利用两个独立的背景图像实现滑动门，它们分别居于左右。将两幅图像想象为两扇可滑动的门，当二者滑至重叠状态时，占据一个较小的空间；反之，当二者分离开来，则占据一个较大的空间，如图 4.1.17所示。
图4.1.17 滑动门原理
4.1.2 滑动门实现原理
（1） 标签结构，代码如下：
（2） 设置A的背景为背景的左半部分，span的背景为右半部分，如图 4.1.8所示。
实现思路：
准备菜单左侧的 tableft.gif和右侧的 tabright.gif背景图像，每个菜单的结构采用 span标签和 a标签制作；a标签的背景采用tableft.gif，span标签的背景采用 tabright.gif；背景图像不重复。
制作步骤如下：
（1） 采用 span标签和超链接搭建导航栏结构，代码如下：
（2） 定义 tab 的样式属性，代码如下：
#tabs1 {
font-size:93%;
float:left;
width:100%;
background:#F4F7FB;
line-height:normal;
border-bottom:1px solid #BCD2E6;
}
#tabs1 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs1 li {
display:inline;
margin:0;
padding:0;
}
（3） 定义超链接和 span标签的样式，代码如下：
#tabs1 a{
float:left;
background:url("images/tableft1.gif")no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
color:red;
}
#tabs1 aspan {
float:left;
display:block;
background:url("images/tabright1.gif") no-repeat right top;
padding:5px15px 4px 6px;
}
（4） 定义菜单鼠标悬停下，超链接和 span标签的样式，代码如下：
#tabs1 a:hover{
background-position:0% -42px;
}
#tabs1 a:hoverspan {
background-position:100%-42px;
}
其中 background-position用来设置背景图像的位置，允许为负值，如 background-position：100% -42px表示在 X轴方向右移动，保证图像的右侧位置与元素的右侧重合，在Y轴方向上移动42px。
4.1.1 应用滑动门技术的玻璃效果菜单
本例中要实现一个玻璃材质效果的水平菜单。为了表现出立体的视觉效果，以及玻璃的质感．必须借助图像才可以实现本例中用到了两个图像，分别作为整个菜单的背景色平铺使用的，和当鼠标指针经过某个菜单项的时候显示出来的。
从效果图中可以看出，玻璃材质图是一个固定的图像文件，而菜单中的各个菜单项宽窄不一，却都可以完整地显示出来，这是如何实现的呢？这里使用的就是“滑动门”技术，它被广泛应用于各种CSS效果中，因此希望读者能够真正理解这个案例的本质原理。
一、基本思路
首先讲解滑动门技术的核心原理。图4.1.11中的箭头表示了两个圆角矩形图像的滑动方向。较深颜色区域表示二者重叠的部分，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动，重叠部分的宽度会根据内容自动调整，就像两扇推拉门一样，因此这种技术就被称为“滑动门”。
可以看到，每个文字链接都是作为一个列表项目
二、设置菜单整体效果
下面设置菜单的整体效果。
① 设置文字的字体和字号，井设置菜单的总体宽度，这个宽度值可以先设一个比较大的值，等最终效果做好以后，再调整到合适的值，代码如下。
#menu {
font-family:Arial;
font-size:14px;
width:400px;
}
② 设置ul的样式，代码如下。
#menu ul {
display:block;
width:500px;
padding:0 0 0 8px;
margin:0;
list-style:none;
height:35px;
}
这里首先设置了padding和margin，然后将list-style属性设置为none，这样可以取消每个列表项目前面的圆点。然后设置高度为35像素，这正是背景图像的高度，最后将背景设置为图像所在的地址。③ 设置#menu容器中的li的属性。li原本就是块级元素，这里将其设置为向左浮动，这样将使得各列表横向排列，而不是默认的竖直排列，代码如下。
#menu ul li {
float:left;
}
④ 将a元素设置为块级元素，这样整个矩形范围内都会响应鼠标事件，代码如下。
#menu ul li a{
display:block;
float:left;
line-height:35px;
color:#ddd;
text-decoration:none;
padding:0 0 0 14px;
}
上面这段代码中，将a标记设置为块级元素以后，设置了行高line-height属性。设置行高可以使文字竖直方向居中排列。然后将文字设置为浅灰色，并取消链接的下划线。最后，设置padding属性，在每个菜单项的左侧设置了14像素的内边距。
这时的效果就已经完成了基本设置。接下来就是最关键的任务了——设置菜单项的背景。
三、使用“滑动门”技术设置玻璃材质背景
① 首先设置a元素的鼠标经过效果，代码如下。
#menu ul li a:hover{
color:#fff;
background: url(hover.gif);
}
这里将文字设置为白色，然后将玻璃质感的图像文件地址作为背景属性的值，此时在浏览器中查看的话就已经有变化效果了。
注意：可以看到，鼠标指针经过时，玻璃材质的背景已经出现了，但是它的右边被齐刷刷地切断了，而没有出现背景图像的右端。这个问题如何解决呢？
在CSS中是不能使图像的宽度缩放的。解决方案之一是为每一个菜单项创建各自宽度的背景图像，但是显然适应性要差很多，而且会需要多个图像文件，增加下载的流量，因此不是一个好办法。
另外一个可行的解决方案是使用前面在HTML中设置的文字加粗标记。基本思想就是把标记作为“钩子”来设置CSS样式，因此可以再为它的背景设置一个背景圈像。这个背景图像仍然使用惟一的玻璃材质图像文件，不同的是这次从右向左展开，这样就可以出现右边的端点了。具体的方法如下。
② 对b标记的属性进行设髓，这里仅需将其设置为块级元素就可以了，代码如下。
#menu ul li a b{
display:block;
}
③ 设置在鼠标指针经过时的b标记样式。这是很关键的一个步骤，代码如下。
#menu ul li a:hover b{
color:#fff;
background: url(hover.gif) no-repeat rightright top;
}
上面的代码中首先设置文字颜色为白色，这样鼠标指针经过时效果会更加醒目。然后设置背景图片。这个图片将会覆盖在前面定义的“#menu ul li a:hover”中没置的图片的上面。这两个图片实际上是同一个图片，后面的“no-repeat right top”设定了这个背景图的铺设方式，只显示一次，并从右上角开始铺设。
④ 这样基本上已经成功了，只是背景图像还不对称，右边还应该增加一些空白，这只需要在“#menu ul Ii a b”的样式中增加一条内边距的样式，在最右侧对称地增加14像索内边距即可，代码如下。
#menu ul li a b{
display:block;
padding:0 14px 0 0;
}
此时在浏览器中的效果如图1所示，这正是我们需要的效果。
四、进一步解决的问题
1.修饰菜单项的文字
这里需要提示一点。为了能够增加玻璃材质的背景图像，我们使用了b标记作为“钩子”，来挂接CSS样式，这样菜单项的文字就以租体显求了，如果不想使用粗体，那么也很简单，只需要在“#menu uI li a b”和“#menu ul li a:hoverb”两个选择器中分别增加一条样式，使文字的粗细为正常(normal)即可。
2.菜单的背景随浏览器窗口扩展
此外，由于设置了#menu容器的width属性(500px)，因此这个导航菜单的宽度就是固定的了，而有时可能希望菜单的背景随浏览器窗口的扩展而扩展。
为了实现自动扩展，可以进行如下尝试。对#menu的设置有如下代码：
#menu {
font-family:Arial;
font-size:14px;
width:400px;
}
将其修改为：
#menu {
font-family:Arial;
font-size:14px;
margin:0 auto 0 0;
background:url(under.gif);
}
这样简单的修改确实实现了可以随浏览器窗口扩展。
3.设置滚动条
这时又出现了新的问题，当浏览器变窄以后，菜单项会自动折行。在大多数情况下，并不希望出现这种效果，而是希望窗口变窄到一定程度时自动出现滚动条。
这是如何实现的呢？原来蓝色的背景图像是设置在ul的下面的，为了实现菜单项不自动折行，就要给ul设置width属性．这样就会导致背景图像也无法扩展。解决方法是将背景图像从ul移动到#menu容器中，这样背景图像会随着#menu容器的扩展而扩展，同时ul设置宽度后，又限制了菜单项的自动折行。修改后的代码如下。至此本案例全部完成。
#menu {
font-family:Arial;
font-size:14px;
margin:0 auto 0 0;
background:url(under.gif);
}
#menu ul {
display:block;
width:500px;
padding:0 0 0 8px;
margin:0;
list-style:none;
height:35px;
}
4.1.1 应用滑动门技术制作投票
许多门户网站，用户可以对文章进行评论、打分，下面将演示一个平滑图片投票特效的制作过程
代码：
.starts{
list-style:none;
margin:0px;
padding:0px;
width:650px;
height:125px;
position:relative;
background:url(start.jpg)0px 0px repeat-x;
overflow:hidden;
}
.starts li a{
position:absolute;
display:block;
width:130px;
height:123px;
text-decoration:none;
z-index:2;
padding:0px;
margin:0px;
}
.startsli a:hover{
background:url(start.jpg)-1px -125px;
z-index:1;
left:0px;
top:0px;
}
.startsa.start1{
left:0px;
}
.startsa.start1:hover{
width:130px;
}
.starts a.start2{
left:130px;
}
.startsa.start2:hover{
width:260px;
}
.starts a.start3{
left:260px;
}
.startsa.start3:hover{
width:390px;
}
.starts a.start4{
left:390px;
}
.startsa.start4:hover{
width:520px;
}
.startsa.start5{
left:520px;
}
.startsa.start5:hover{
width:650px;
}