iT邦幫忙

0

HTML

richon2000 9 月前1030 瀏覽

請問各位大大,以後有兩張圖片,第一張是滑鼠未移進時,第二張是滑鼠移進時,請問如何撰寫CODE? 應該不是直接放圖片吧?!!http://ithelp.ithome.com.tw/upload/images/20161107/20054289H21ZdPwdwI.pnghttp://ithelp.ithome.com.tw/upload/images/20161107/20054289CxpHz5NVVO.png

看更多先前的討論...收起先前的討論...
窮嘶發發發 iT邦高手 1 級 ‧ 9 月前 檢舉
不建議這樣的漸層色變化直接用圖片,可以直接用 CSS 作的
用CSS 會比較快,不需要載入圖片,只是顏色調用而已
窮嘶發發發 iT邦高手 1 級 ‧ 9 月前 檢舉
還有建議可以參考 BOOTSTARP 之類的已經寫好的開發套件,都有基本的按鈕可以用,你可以參考看看
asys0512 iT邦新手 4 級 ‧ 9 月前 檢舉
這個作法歷史已經很久了 好懷念.....以前我也是這樣做
窮嘶發發發 iT邦高手 1 級 ‧ 9 月前 檢舉
http://css-button-generator.com/ CSS 漸層按鈕產生器
用這個比較快
窮嘶發發發 iT邦高手 1 級 ‧ 9 月前 檢舉
用 CSS 也不一定要放圖片, BASE64 就可以拿來處理圖片問題,這種圖片轉 BASE64,不直接用圖片,速度差不了多少
樓主也可以考慮 直接把圖片 轉 base64 崁入 css 語法內,會比你直接崁入圖片好
鄭小安 iT邦新手 5 級 ‧ 9 月前 檢舉
用 CSS 比較活,如果你視作網頁設計~應該還是要會一下
richon2000 iT邦新手 4 級 ‧ 9 月前 檢舉
謝謝發哥,有這個資源的確比較簡便,感恩!!

2 個回答

2
bigsmile
iT邦新手 4 級 ‧ 9 月前
最佳解答

用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>
~            

背景圖長這樣

http://ithelp.ithome.com.tw/upload/images/20161108/20069635BXkzJ1hW7i.png

richon2000 iT邦新手 4 級 ‧ 9 月前 檢舉

真感謝bigsmile大大,可以學習程式架構,感恩!

richon2000 iT邦新手 4 級 ‧ 9 月前 檢舉

再請問一下,滑鼠移進時,背影圖可以上下反轉嗎? 可否再公佈一下code, 謝謝!!

0
海綿寶寶
iT邦超人 1 級 ‧ 9 月前

就是直接放圖片

選我正解

我要發表回答

立即登入回答