CSS图片翻转

来源:互联网 发布:java外文参考文献 编辑:程序博客网 时间:2024/05/16 14:00
演示地址:http://www.5dworld.net/css/reversal.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
    /*通过改变背景图像翻转,需两张图片*/
    .reversal:link,.reversal:visited{display:block;width:122px;height:37px; background:url(images/zc_05.gif)}
    .reversal:hover{background:url(images/zc_07.gif)}
    /*通过改变背景图像位置翻转,将两张图片合为一张;这种较好,可以避免浏览器下载另一张图片出现闪烁*/
    .reversal2:link,.reversal2:visited{display:block;width:122px;height:37px; background:url(images/zc.gif); background-position:0 -37px;}
    .reversal2:hover{background-position:0 0;}
</style>
</head>
<body>
<a href="#" class="reversal"></a>
<br />
<a href="#" class="reversal2"></a>
</body>
</html>
原创粉丝点击