素材：
效果：默認顯示上半部分，鼠標移到按鈕上觸發hover顯示下半部分。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>購物車動態變化按鈕</title>
<style type="text/css">
a:link{
/*1.將行內元素轉成行內塊元素*/
display: inline-block;
/*2.對行內塊元素定義大小*/
width:67px;
height:31px;
/*3.導入圖片背景*/
background:url("images/110.png");
}
a:visited{
}
a:hover{
background:url("images/110.png") bottom;
}
a:action{
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
總結：
1.要對行內元素（如p、a、input、span等標籤）進行大小的設定，需要：
①.將行內元素轉成行內塊元素
②.對行內塊元素定義大小
……
2.background的連寫：
①.background-color：背景色
②.background-image：背景圖片
③.background-repeat：repeat(默認)|no-repeat|repeat-x|repeat-y 背景平鋪
④.background-position：left|right|center|top|bottom 背景定位
⑤.background-attachment：scroll | fixed 背景是否滾動
綜合連寫即：background:red url("1.png") no-repeat 30px 40px scroll;
注意：連寫的時候沒有順序要求，url爲必寫項。