CSS基础应用学习系列(1)——基于图像的翻转

    修改背景颜色对于简单的按钮很合适，但是对于比较复杂的按钮，最好使用背景图像。在下面，我创建了两个按钮的图象，一个用于正常状态，一个用于鼠标停留状态。

如下图：

  

(比较简单的两张图，不想做多余的处理，只是想说明下思想，因为本人对美工图片比较懒，其中绿色为鼠标没经过时的锚图片，红色为鼠标经过时的锚图片)

然后编写这样的CSS代码：

a:link, a:visited

{

display: block;

width:100px;

height:41px;

line-height:40px;

color:#00FF00;

tet-decoration:none;

background:#94B8E9 url(images/green.png) no-repeat left top;

text-align:center;

}

a:hover

{

background:#469 url(images/red.png) no-repeat left top;

color:#FF0000;

}

然后添加：<a href=”#”>登陆</a>，运行下试试结果。

多图象方法的主要特点是在浏览器第一次装载鼠标停留图像时有短暂的延迟。这会造成闪烁效果，让按钮感觉起来有点儿反应迟钝。可以将鼠标停留图像作为背景应用于父元素，从而预先装载它们。但是，有令一种方法，并不切换多个背景图像，而是使用一个图像并切换它的背景位置。使用单个图像的好处是减少了服务器请求的数量，而且可以将所有按钮状态放在一个地方。

首先，创建组合的按钮，如下图：

然后编写这样的CSS代码：

a:link,a:visited

{

display:block;

width:100px;

height:40px;

line-height:40px;

color:# 00FF00;

text-decoration:none;

background:#94B8E9 url(images/pixy_rollover.png) no-repeat left top;

text-align:center;

}

a:hover

{

background-color:#369;

background-position:right top;

}

不幸的是，即使只是改变图像的对准方式，Windows上的IE仍然会向服务器请求新的图像，这会产生轻微的闪烁，有点儿烦，为了避免闪烁。需要将翻转状态应用于链接的父元素；例如包含它的段落。

p

{

width:100px;

background:#94B8E9 url(images/pixy_rollover.png) no-repeat right top;

}

在图像重新装载时，它仍然会消失一段时间。但是，现在会露出相同的图像，消除了闪烁。

呵呵，大功告成啦!!^_^