iT邦幫忙

0

HTML

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

看更多先前的討論...收起先前的討論...
不建議這樣的漸層色變化直接用圖片,可以直接用 CSS 作的
用CSS 會比較快,不需要載入圖片,只是顏色調用而已
還有建議可以參考 BOOTSTARP 之類的已經寫好的開發套件,都有基本的按鈕可以用,你可以參考看看
火爆浪子 iT邦研究生 1 級 ‧ 2016-11-07 20:27:29 檢舉
這個作法歷史已經很久了 好懷念.....以前我也是這樣做
http://css-button-generator.com/ CSS 漸層按鈕產生器
用這個比較快
用 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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

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

背景圖長這樣

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

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

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

晨勤 iT邦新手 4 級 ‧ 2016-11-08 18:18:10 檢舉

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

ssss58309 iT邦新手 5 級 ‧ 2018-03-10 16:03:16 檢舉

推用心回答!

0
海綿寶寶
iT邦大神 1 級 ‧ 2016-11-07 20:35:30

就是直接放圖片

選我正解

笑死  超白爛

我要發表回答

立即登入回答