HTML

網頁設計

晨勤 2016-11-07 15:55:02 ‧ 2167 瀏覽

分享至

請問各位大大，以後有兩張圖片，第一張是滑鼠未移進時，第二張是滑鼠移進時，請問如何撰寫CODE? 應該不是直接放圖片吧?!!

看更多先前的討論...收起先前的討論...

窮嘶發發發 iT邦高手 1 級 ‧ 2016-11-07 16:08:17 檢舉

不建議這樣的漸層色變化直接用圖片，可以直接用 CSS 作的
用CSS 會比較快，不需要載入圖片，只是顏色調用而已

窮嘶發發發 iT邦高手 1 級 ‧ 2016-11-07 16:13:19 檢舉

還有建議可以參考 BOOTSTARP 之類的已經寫好的開發套件，都有基本的按鈕可以用，你可以參考看看

火爆浪子 iT邦研究生 1 級 ‧ 2016-11-07 20:27:29 檢舉

這個作法歷史已經很久了好懷念.....以前我也是這樣做

窮嘶發發發 iT邦高手 1 級 ‧ 2016-11-08 10:59:11 檢舉

http://css-button-generator.com/ CSS 漸層按鈕產生器
用這個比較快

窮嘶發發發 iT邦高手 1 級 ‧ 2016-11-08 13:39:10 檢舉

用 CSS 也不一定要放圖片， BASE64 就可以拿來處理圖片問題，這種圖片轉 BASE64，不直接用圖片，速度差不了多少
樓主也可以考慮直接把圖片轉 base64 崁入 css 語法內，會比你直接崁入圖片好

鄭小安 iT邦新手 5 級 ‧ 2016-11-08 16:16:29 檢舉

用 CSS 比較活，如果你視作網頁設計~應該還是要會一下

晨勤 iT邦新手 4 級 ‧ 2016-11-08 17:26:03 檢舉

謝謝發哥，有這個資源的確比較簡便，感恩!!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

bigsmile

iT邦新手 4 級 ‧ 2016-11-08 12:27:33

最佳解答

用CSS就可以了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 設定選單背景圖及選單效果預設值 */
        .btn {
            display: inline-block;
            width: 98px;
            height: 40px;
            line-height: 40px;
            color: white;
            background: url(bg.png) right top no-repeat;
            text-decoration: none;
            text-align: center;
        }
        .btn:hover {
            color: yellow; /* hvoer 進來文字變色的效果 */
        }   
    </style>
</head>

<body>
    <div id="nav">
        <a href="#" class="btn">公司簡介</a><a href="#" class="btn">友好連結</a>
    </div>
</body>

</html>
~

背景圖長這樣