Css 單圖片按鈕實例(css 圖片變換)

本文轉載自查看原文 2014-08-26 11:45 4486 Css

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3之3D變換實例詳解 css之利用偽類實現按鈕點擊狀態的明暗變換【HTML+CSS+JavaScript（jQuery）】圖片通過按鈕左右滾動【CSS】過渡、動畫和變換 css3之transform 變換 css-按鈕中有圖片和文字，怎么才能讓文字和圖片都中？？按鈕,圓形按鈕,帶文字的圖片按鈕 JS中通過按鈕隨意變換背景顏色 css實現全屏遮罩，顯示點擊放大的圖片，並有關閉按鈕（x） css3實現單選、多選按鈕改變其原生樣式用圖片代替