空間管理您的位置: 理想空間 [Blog + 相簿] » SUBEBE's 部落教學 » 日誌

7.11.08 >> 我的網上小店終於開張了~ \(^0^ )/ http://hk.myblog.yahoo.com/iluvmina 大家快去看看參觀一下喔!! >>新模版完成!!

[CSS] - 如何在留言/評論框內加圖案

上一篇 / 下一篇 2007-08-18 23:15:16 / 個人分類：【模版教學】

查看( 1226 ) / 評論( 50 ) / 評分( 20 / 0 )

估不到有很多人對我的"游泳池"有興趣，

那我就寫一篇教學吧，好讓我未告訴的朋友也能使用；

說壞些，其實是自己很懶，不想重複又重複地在罰抄，呵～

好心急呢～　快ｄ跟下面步驟做啦～

首先找一張心水圖片，然後修改尺寸大小為３５０闊X２６５高像素的靜態／動機圖（jpg.／gif.／png.等等）。

　　　不懂如何修改圖片的，可把圖址寫給我，我很樂意幫大家改圖！

改好後，套入下列語法再放到CSS樣式表內，就完成了！Easy!!

#xspace-commentform {
background: url(圖址) no-repeat center; font-size: 12px; color: #000;
}

no-repeat 不重複，如果圖片很小，可用repeat;

center　圖的位置，可因應圖的重心而放置；

font-size　文字的尺寸，數值越大，尺寸越大；

color　文字的顏色；

以下還有其他設定:

repeat-x	橫重複
repeat-y	直重複
no-repeat	不重複
right bottom	右下
left bottom	左下
right top	右上
left top	左下
center	中間
fixed	背景固定不動
scroll	背景隨著捲軸移動

我做了幾個範例，大家就會容易明白一點。

示範１．

只是打字外框有圖

#xspace-commentform { background: url(圖址) repeat;　font-size:14px; color: #000; }

示範２．

只是打字內框有圖

#xspace-commentmsg { background: url(圖址) repeat; font-size:16px; color: #0033ff; }

示範３．

內外框不同圖

#xspace-commentmsg { background: url(圖址) repeat; font-size:16px; color: #0033ff; } #xspace-commentform { background: url(圖址) repeat; font-size:14px; color: #000; }

示範４．

圖片覆蓋整板

#xspace-commentmsg { background: url();} #xspace-commentform { background: url(圖址) no-repeat center; font-size:14px; color: #000; }

教學完成，大家應不會再有問題吧，希望大家都可以有個靚靚blog!!

點擊圖片可在新窗口打開作任何修改前，一定要作好備份[Back-up]；

點擊圖片可在新窗口打開如發現語法不能使用或錯誤，請留言清楚公知；

點擊圖片可在新窗口打開當遇到修改有問題，歡迎留言發問，我都會一一解決(盡人事啦)，但自已先摸索研究一下嘛，不要常依賴別人囉！

點擊圖片可在新窗口打開喜歡本站可以把帶回去連結喔！！

用BloggerAds讓部落格更精采

全部腳印 不留腳印留下腳印:

相關閱\讀:

[CSS] - 如何更改滑鼠圖案 (subebe, 2006-8-01)
[目錄] - 模版教學列表 (subebe, 2006-12-09)
[HTML] - 捲軸顏色的變化 (subebe, 2007-5-15)
[CSS] - 如何在首頁添加"日誌分類" (subebe, 2007-5-16)
[CSS] - 如何修改外部背景 (subebe, 2007-8-04)
[CSS] - 如何修改側邊標題欄 (己作修改7.8.07) (subebe, 2007-8-04)

導入論壇收藏分享給好友管理舉報

TAG: 模版教學

引用刪除 subebe / 2008-10-29 17:04:41: 原帖由koalakoalakoala於2008-10-28 16:50:53發表
用回IE6看到了...
IE7...唉.

我試過現在只有呢段語法用到:
#xspace-commentmsg {background: url();}

遲些我有空一點再慢慢研究怎樣可以整回以前的樣子!! 謝謝你的提供方法,但我都不成功!!

引用刪除 koalakoalakoala / 2008-10-28 16:50:53: 用回IE6看到了...
IE7...唉.

引用刪除 koalakoalakoala / 2008-10-28 05:46:37: 我的留言圖出到後又消失了,
被U記吹漲...

引用刪除 koalakoalakoala / 2008-10-25 16:16:41: 版友michellelulu999教路,
圖片最佳尺寸為( w350 x h450 )

(選center/top/bottom圖片會有移上/移下之分.)

引用刪除 leeheiyu / 2008-10-25 15:05:57: 評 5 分

引用刪除 koalakoalakoala / 2008-10-25 14:43:12: 留言圖大功告成!

語法和原用的沒變,
原來只是[中間字位的圖]的語法影響了,
現在分上下兩段放便能出到全圖了.^o^

如果想[中間字位的白位]也出圖,
直接如下加上第2段語法便行了.

#xspace-commentform.{background:url(圖址) no-repeat center; font-size:16px; color: #色碼;}

#xspace-commentmsg {
background: url();}

引用刪除 EasyHappy / 2008-10-08 13:50:38: 我都改唔到呀...help

引用刪除治潔 / 2008-10-03 23:28:42: 對不起，現在改版後，我的留言框跟你的方法已無法顯示圖案了，那我應該怎辦？

引用刪除 subebe / 2008-08-19 11:20:44: ★ RE : koala

整到就好了~

引用刪除 koalakoalakoala / 2008-08-12 19:09:43: 完全不懂css,
摸了很久,
終於都成功啦!

引用刪除 subebe / 2008-07-23 10:39:19: ★ RE : kuromi

kuromi是什麼?? 只要你給張圖我,我就可幫你改!!

引用刪除 kuromi大人 / 2008-07-18 22:31:42: 評 5 分
我想搵kuromi圖案呀,搵到請幫我改埋圖丫,因為我都係唔明白

引用刪除 subebe / 2008-07-14 15:59:29: ★ RE : 治潔

你改到就好了^^

引用刪除治潔 / 2008-07-11 22:29:10: 很感謝你的文章，我終於能把留言框的圖案改掉

引用刪除 subebe / 2008-06-23 17:00:35: ★ RE :

你有什麼問題嗎??

引用刪除 :( / 2008-06-22 07:03:36: 評 5 分
#xspace-commentmsg {
background: url();}
#xspace-commentform {
background: url(圖址) no-repeat center; font-size:14px; color: #000;
}