標籤：style blog http color ar div html log sp
1.情境描述，根據滑鼠的移動，動態切換按鈕圖片。
2.方法1，準備兩張120*41的圖片，一張正常狀態圖片，一張按下片。在滑鼠放在的按鈕上設定按片，移開又恢複到正常狀態圖片。缺點：在網頁上按下的圖片需要下載，會出現滑鼠移動上去，未馬上轉場效果。
<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">#theLink{ display:block; width:120px; height:41px; margin:0 auto; background:url(images/normal.gif) no-repeat;}#theLink:hover{background:url(images/press.gif) no-repeat;}</style></head><body><a id="theLink"></a></body></html>
3.方法2，整個設定一張圖片，120*82，根據顯示的需要，動態截取顯示尺寸。優勢：在網頁上可以一次下載完全一張圖片，節約資料效率。
<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">#theLink{ display:block; width:120px; height:41px; margin:0 auto; background:url(images/buttonBG.gif) no-repeat;}#theLink:hover{ background:url(images/buttonBG.gif) no-repeat 0 -41px;}</style></head><body><a id="theLink"></a></body></html>
Css 單圖片按鈕執行個體(css 圖片變換)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
