CSS自定板面-留言和回應區插圖

想要讓回應和留言框有個美美的小插圖嗎?

請將下面語法貼到/*----整體頁面設定------*/下
並將http:xxxxxx.gif改成您要的圖檔即可。

以下語法為圖檔在右不重覆張貼狀態(建議只改圖檔高度height就可以了)
CSS語法如下

/*留言和回應區插圖*/
textarea {
background: url(http:xxxxxx.gif);
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;
height:195px;
}

語法說明補充
背景圖片位置：
背景向上對齊　background-position:top;
背景向下對齊　background-position:bottom;
背景向左對齊　background-position:left;
背景向右對齊　background-position:right;
背景置中對齊　background-position:center;
備註：background-position: left top; 表示圖片「靠左上角」

背景是否重複：
背景圖重複排列　background-repeat : repeat;
背景圖片不重複　background-repeat : no-repeat;
背景在Ｘ軸重複　background-repeat : repeat-x;
背景在Ｙ軸重複　background-repeat : repeat-y;

邊框距離：
跟左邊框的距離　padding-left: 20px;
跟右邊框的距離　padding-right: 20px;
備註：數值可自行調整。

不要用背景圖，只想用單一顏色
textarea {
background-color:# xxxxxx;
}
備註：#xxxxxx;顏色可自行參考色碼表

其他常用語法：
透視背景　
background:transparent;

不改背景，直接改回應區字體的顏色，語法如下
text {
color:# xxxxxx;
}
備註：#xxxxxx;顏色可自行參考色碼表

LINE 分享

留言

2007-09-05 16:36Secret：
感謝分享教學^^~
2007-09-05 16:43冷焰封情：
好棒的CSS教學唷@@
我敢快收藏起來@@
謝謝薔薇大大^^
2007-09-05 17:18狐幫主：
感謝分享０ˇ０
看了各位高手，狐應該開一個CSS資料夾來收藏大家的文章（笑）
我推！ ( ′▽`)-oGP
2007-09-05 17:21遺忘：
GJ
2007-09-05 17:30遺忘：
請問透視語法要安插在哪邊@@"??設定顏色那邊嗎..測試出來變灰色@@"
2007-09-05 18:28夏日薔薇：/*留言和回應區插圖*/
裡面任一區
2007-09-05 17:37白菊：
感謝分享

小弟學起來嚕^^
2007-09-05 18:13夏多爾‧米菲‧艾因法：
請問上述的語法是貼在哪裡才會有效果出現?
2007-09-05 18:27夏日薔薇：貼到/*----整體頁面設定------*/下就可以了喔^^
2007-09-05 18:41夏多爾‧米菲‧艾因法：
薔薇大大
你上面提供的地方有多空白
測試會有問題
記得把空白移除
免得一堆人都測試不出來 @@
2007-09-05 19:04夏日薔薇：那邊=.=?
2007-09-05 19:48白兔：
謝謝辛苦寫教學˙ˇ˙
透明語法…嗯！我ａ走了╮(￣▽￣)╭
2007-09-05 22:15水靈雲兒：
謝謝分享~我收走囉~感恩≧﹏≦
2007-09-05 22:32夏多爾‧米菲‧艾因法：
background: url(http:xxxxxx.gif);
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;

這裡面的冒號後面都多出一個空白
2007-09-05 22:39羅斯洛立安的小黃花：
謝謝大大~
我打包帶走囉:p
2007-09-06 00:52啦啦噗：
真的很厲害ＸＤ～～～
2007-09-06 10:09風的名字：
謝謝妳^^
我也要來試試看了~
2007-09-06 10:17焱雁：
受益良多不推不行~
順便收藏起來XD
2007-09-06 13:37老爹：
JPG不行嗎我怎用出來沒顯示..
2007-09-06 13:43夏多爾‧米菲‧艾因法：
JPG應該可以吧
看你放的網路空間吧
建議用香港Yahoo
我的圖片都放那邊的
2007-09-06 13:51老爹：
我剛用香港的還是一樣不行他的語法好像大家說有控格@@ 還是說是這個問題你可以把你的語法複製給我咩@@?
2007-09-06 14:01老爹：
恩有了部用麻煩了-.-
2007-09-06 16:43赫斯蒂亞：
哇哈哈!我成功了^^
感恩大大教學喔.
2007-09-06 17:39小蒼蘭：
我先收藏喔
有空再學感恩分享
大好人耶
2007-09-06 18:59美聲♀淚小喵：
謝謝教學^^~ 很棒~
2007-09-06 20:10渴求翅膀的貓：
(舉手)
請問留言區的長寬大概是多少=w=?
2007-09-06 20:17夏日薔薇：不一定耶@@~
因為寬跟高要看你的圖有多大而做調整的^^
2007-09-07 13:41★賢★：
利害利害薑還是老的辣 GOOD
2007-09-07 18:18昨日夢醒今日醉：
感謝大人詳細的教學^^~推
2007-09-07 18:46逆時雨：
感恩＠＠讓對css語法一竅不通的我

也可以改巴哈小屋的介面XD
2007-09-07 20:29御風：
不改背景，直接改回應區字體的顏色，語法如下
text {
color:# xxxxxx;
}

請問這與法要貼那邊呢?

我都改不成功想把我留言區的字體顏色變成白色

因為背景圖是黑的
2007-09-08 09:09夏日薔薇：/*留言和回應區插圖*/
textarea {
background:color:#xxxxxx;
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;
height:195px;
}
2007-09-07 23:05銀面之謎：
哇~沒想到能做這樣
我為你鼓掌~
也很感謝你的分享~
2007-09-09 10:30綾奈：
謝謝分享....我只會看HTML語法..CSS不會=.=
2007-09-10 19:05千古恨：
好棒喔
感謝大大分享
我要感動到痛哭流涕了
2007-09-11 15:05夏日薔薇：痛哭流涕~~太誇張了點-.-
2007-09-11 13:04mimi：
謝謝大大的教學^^
2007-09-11 15:03夏日薔薇：^^
2007-09-11 17:17Mr.K：
感謝分享ˇˇ
2007-09-28 16:39oops：
看別人精華區進來...讚!!!
2007-09-28 18:57夏日薔薇：:p
2007-09-28 23:15彼岸花開〞：
請問請問><~

圖的副檔一定要是.gif嗎？

我翻遍電腦只找得到jpg檔，使用過後根本顯示不出來Q_Q~

有什麼辦法可以解決嗎...Q口Q|||
2007-09-29 13:10夏日薔薇：兩者都適用吧-.-
妳要不要檢察看看連結檔是不是有問題
2007-09-29 14:31彼岸花開〞：
抱歉抱歉~XD~

我發現這個語法沒辦法用預覽的看到結果XD~

所以以為我貼失敗@@||~

剛剛再試一次終於成功了！

感謝教學^^~繼續美化小屋中>///<
2007-09-30 15:48夏日薔薇：:P
2007-09-30 22:43卡歐斯：
好文推薦~
2007-10-03 22:46電玩假面：
不好意思
我也是用不出留言和回應區插圖
我用的是
/*--------------------------整體頁面設定--------------------------*/
/*留言和回應區插圖*/
textarea {
background: url(http://img105.imageshack.us/img105/1812/1120717884917fh0.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;
height:195px;
}

感謝指導
2007-10-03 23:20電玩假面：
突然間又出現了= =""
不好意思
哆打擾了^^"
2007-10-06 19:07羽兒：
我打包帶走囉
話說回來我找這篇好久
自從小屋毀在原始設定之後~一切從頭再來T-T
2007-10-07 02:21東東o兔↙：
打包~
但是....@-@
我不會耶嗚ˊˋ"
可惡我比較笨嗎Q"Q
感恩分享^^
2007-10-07 18:57Fａiｎt：
薔薇大你好~
那個...這個語法我在用時好像會有點問題...
我用background:transparent;想把背景變透明但是失敗了,用background-color:#000000;讓背景變黑(因為字是設定白色的) 都沒辦法,但是我放圖的語法跟改高度之類的測試卻可以,單純改背景就沒辦法...
現在留言區都看不到字蠻困擾的,還要反白....囧
語法↓
textarea {
background:transparent;
padding-left: 10px;
padding-right:10px;
height:200px;
}
2007-10-08 19:27夏日薔薇：background-color:;
顏色拿掉
2007-10-10 11:55公主‧公主：
讚!!
2007-10-11 16:08人造人間十一號：
請問留言區的寬度可以拉高嗎？圖片寬度有點過高，頭跟尾都被斬掉了一些= ="

偏偏又是GIF動態圖，大小一修改就不會動了..
2007-10-11 17:49夏日薔薇：/*留言處和回應處插圖*/
textarea {
background:url(http:);
background-repeat:no-repeat;
background-position:right;
padding-left:10px;
padding-right:10px;
height:195px;<=====這邊可以改高度
2007-10-14 15:55小慢：
請問一下，我不知為何小屋的主圖被修掉了...>"<
現在找不到可以放圖的地方...(不是上面的大圖喔)
2007-10-14 20:35夏日薔薇：XD剛剛去看了一下
應該是找回來了^^
2007-10-26 22:51『小林健太』：
不知道為什麼
一直無法改出來呢....

/*留言和回應區插圖*/
textarea {
background:url(http://img339.imageshack.us/img339/6107/27744237dw2.jpg);
background-repeat:no-repeat;
background-position:right top;
padding-left:10px;
padding-right:10px;
height:420px;
}
2007-10-27 16:00夏日薔薇：我試是正常的喔@@~
2007-11-04 03:11張弦：
textarea {
background:url(http://i217.photobucket.com/albums/cc18/baihigh110688/707703.jpg);
background-repeat:no-repeat;
background-position:right;
padding-left:10px;
padding-right:10px;
height:550px;
}

出不來有哪裡要修正的誰可以幫我看一下謝謝
2007-11-04 13:27夏日薔薇：我看是正常的喔
2007-11-04 19:59花漓：
737
2007-11-04 19:59花漓：
我是要打˙ˇ˙...
2007-11-06 18:54文月．魚：
.home_input2{
color:#464646;
border:1px #FFA600 dashed;
background:transparent; ←上面跑不出來的板友，請確定這裡的背景不是這樣(透明語法)喲。
}
2007-11-06 18:54文月．魚：
回推一下:P
2007-11-08 10:11小夜 Sayo：
請問一下夏日薔薇大~~
您的這個語法是將背景設定成圖片~~
但是這個圖片會因為留言字行過多而跑上去~~
要怎麼樣才能不管字行再多，圖片會固定住不會往上跑??
也就是說怎麼樣才能讓圖片不受捲軸的影響而固定住??
因為我看有別人就是固定住的，不管打字再多行，圖片都不會往上跑~~
2007-11-08 20:36小夜 Sayo：
抱歉，夏日薔薇大~~
我已經找您的教學了，所以上面的問題就當我沒問吧~~XD
2007-11-11 20:34夜煌：
水
2007-11-17 23:57Aquarius楓：
找到..打包=.=

謝哩^^"
2008-01-23 14:38夢-放下然後記得微笑：
推推推..太棒了><謝謝大大!!!

小屋開始變美美了ˇˇ
2008-02-25 14:02全哥：
.
2008-08-01 11:44紫苑：
謝謝教學～
2008-08-01 11:46紫苑：
那個……夏日薔薇大~~
我還是弄不到透明的那個。

/*留言和回應區插圖*/

textarea {
background:transparent;
padding-left:15px;
padding-right:15px;
height:200px;
}

但是我看來是沒有問題的，可是就是出不來。
2008-09-05 10:56爛瑜衝樹：
非常感謝薔薇大大的教學喔!!!
2008-11-03 14:12柳月〃：
這個一定要推，我想用在無名的部落格裡XD
2008-11-13 22:49夜雨：
感謝分享^^
2008-11-23 21:39雖尾道人金豪洨：
如何讓背景圖固定呢@"@?可以講解一下嗎?
2010-01-03 18:56恆淵：
感謝囉>< 請問大大如何把背景圖像是電腦桌面那樣大我看一些部落閣把畫面往下移
然後圖跟著往下而且圖只有1張不重複自己把圖弄大可是失真了><

小屋創作

日誌2007-09-05 16:00
CSS自定板面-留言和回應區插圖

相關創作

巴哈勇者小屋秋之精靈素材包

申請圖檔空間相關(1022新增)

CSS-勇者小屋重置

留言

日誌2007-09-05 16:00CSS自定板面-留言和回應區插圖

相關創作

巴哈勇者小屋秋之精靈素材包

申請圖檔空間相關(1022新增)

CSS-勇者小屋重置

留言

日誌2007-09-05 16:00
CSS自定板面-留言和回應區插圖