背景图片练习

效果

链接在正常、鼠标移入、点击时有不同的效果



 

方法

为超链接的每个状态设置不同的背景图片

a:link{
	display:block;
	width:93px;
	height:29px;
	
	background-image: url('./img/link.png');
}

a:hover{
	background-image: url('./img/hover.png');
}

a:active{
	background-image: url('./img/active.png');
}

存在的问题

• 图片属于外部资源，浏览器在需要时才加载，所以第一次鼠标移入、第一次点击切换效果前，会有短暂的发白
• 可在浏览器“检查”功能中查看资源加载情况