捐血一袋救人一命

2015年8月25日 星期二

網頁 Menu 增加 Icon 圖片的方法

設計網頁的 Menu 通常都是使用 <ul><li> 標籤來達成最方便,不需要太多的 Coding.

連結的部份就是用 <a> 來達成,不過影像的部份如果使用 <img> 標籤,會造成無法控制影像及超連結文字的對齊,畫面就會醜醜的。(如下圖,Sample)

image

 

所以要使用圖片,得利用 CSS 定義 <a> 的背景圖

background:url(圖片路徑檔名);
background-repeat: no-repeat;
background-size: Npx Mpx;            // 指定圖片縮放寬高,如果你的影像圖檔大小已經先處理好,這就可以省略
background-position:0px center;  // 0px 指圖片起始水平位置,center 指圖片與文字垂直對齊
padding-left: 20px;                           // 調整文字與圖片距離(含圖片寬度)

結果如下圖,Sample

image

最好還是事先把圖檔大小處理好,會比較省事,而且也節省傳輸頻寬,就算考慮到縮放,圖檔也不需要太大,因為 Menu Icon 本身不會需要太大。

反應:

0 意見: