創作內容

33 GP

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

作者：夏日薔薇│2007-09-05 16:00:35│巴幣：0│人氣：6150

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

請將下面語法貼到/*----整體頁面設定------*/下
並將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;顏色可自行參考色碼表

喜歡 33 收藏 129 引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=504195
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：|CSS教學|

留言共 63 篇留言

Secret：
感謝分享教學^^~

09-05 16:36

冷焰封情：
好棒的CSS教學唷@@
我敢快收藏起來@@
謝謝薔薇大大^^

09-05 16:43

狐幫主：
感謝分享０ˇ０
看了各位高手，狐應該開一個CSS資料夾來收藏大家的文章（笑）
我推！ ( ′▽`)-oGP

09-05 17:18

遺忘：
GJ

09-05 17:21

遺忘：
請問透視語法要安插在哪邊@@"??設定顏色那邊嗎..測試出來變灰色@@"

09-05 17:30

夏日薔薇：
/*留言和回應區插圖*/
裡面任一區09-05 18:28

白菊：
感謝分享

小弟學起來嚕^^

09-05 17:37

夏多爾‧米菲‧艾因法：
請問上述的語法是貼在哪裡才會有效果出現?

09-05 18:13

夏日薔薇：
貼到/*----整體頁面設定------*/下就可以了喔^^09-05 18:27

夏多爾‧米菲‧艾因法：
薔薇大大
你上面提供的地方有多空白
測試會有問題
記得把空白移除
免得一堆人都測試不出來 @@

09-05 18:41

夏日薔薇：
那邊=.=?09-05 19:04

白兔：
謝謝辛苦寫教學˙ˇ˙
透明語法…嗯！我ａ走了╮(￣▽￣)╭

09-05 19:48

水靈雲兒：
謝謝分享~我收走囉~感恩≧﹏≦

09-05 22:15

夏多爾‧米菲‧艾因法：
background: url(http:xxxxxx.gif);
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;

這裡面的冒號後面都多出一個空白

09-05 22:32

羅斯洛立安的小黃花：
謝謝大大~
我打包帶走囉:p

09-05 22:39

啦啦噗：
真的很厲害ＸＤ～～～

09-06 00:52

風的名字：
謝謝妳^^
我也要來試試看了~

09-06 10:09

焱雁：
受益良多不推不行~
順便收藏起來XD

09-06 10:17

老爹：
JPG不行嗎我怎用出來沒顯示..

09-06 13:37

夏多爾‧米菲‧艾因法：
JPG應該可以吧
看你放的網路空間吧
建議用香港Yahoo
我的圖片都放那邊的

09-06 13:43

老爹：
我剛用香港的還是一樣不行他的語法好像大家說有控格@@ 還是說是這個問題你可以把你的語法複製給我咩@@?

09-06 13:51

老爹：
恩有了部用麻煩了-.-

09-06 14:01

赫斯蒂亞：
哇哈哈!我成功了^^
感恩大大教學喔.

09-06 16:43

小蒼蘭：
我先收藏喔
有空再學感恩分享
大好人耶

09-06 17:39

美聲♀淚小喵：
謝謝教學^^~ 很棒~

09-06 18:59

渴求翅膀的貓：
(舉手)
請問留言區的長寬大概是多少=w=?

09-06 20:10

夏日薔薇：
不一定耶@@~
因為寬跟高要看你的圖有多大而做調整的^^09-06 20:17

★賢★：
利害利害薑還是老的辣 GOOD

09-07 13:41

昨日夢醒今日醉：
感謝大人詳細的教學^^~推

09-07 18:18

逆時雨：
感恩＠＠讓對css語法一竅不通的我

也可以改巴哈小屋的介面XD

09-07 18:46

御風：
不改背景，直接改回應區字體的顏色，語法如下
text {
color:# xxxxxx;
}

請問這與法要貼那邊呢?

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

因為背景圖是黑的

09-07 20:29

夏日薔薇：
/*留言和回應區插圖*/
textarea {
background:color:#xxxxxx;
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;
height:195px;
}
09-08 09:09

銀面之謎：
哇~沒想到能做這樣
我為你鼓掌~
也很感謝你的分享~

09-07 23:05

綾奈：
謝謝分享....我只會看HTML語法..CSS不會=.=

09-09 10:30

千古恨：
好棒喔
感謝大大分享
我要感動到痛哭流涕了

09-10 19:05

夏日薔薇：
痛哭流涕~~太誇張了點-.-09-11 15:05

mimi：
謝謝大大的教學^^

09-11 13:04

夏日薔薇：
^^09-11 15:03

Mr.K：
感謝分享ˇˇ

09-11 17:17

oops：
看別人精華區進來...讚!!!

09-28 16:39

夏日薔薇：
:p09-28 18:57

彼岸花開〞：
請問請問><~

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

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

有什麼辦法可以解決嗎...Q口Q|||

09-28 23:15

夏日薔薇：
兩者都適用吧-.-
妳要不要檢察看看連結檔是不是有問題09-29 13:10

彼岸花開〞：
抱歉抱歉~XD~

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

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

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

感謝教學^^~繼續美化小屋中>///<

09-29 14:31

夏日薔薇：
:P09-30 15:48

卡歐斯：
好文推薦~

09-30 22:43

電玩假面：
不好意思
我也是用不出留言和回應區插圖
我用的是
/*--------------------------整體頁面設定--------------------------*/
/*留言和回應區插圖*/
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;
}

感謝指導

10-03 22:46

電玩假面：
突然間又出現了= =""
不好意思
哆打擾了^^"

10-03 23:20

羽兒：
我打包帶走囉
話說回來我找這篇好久
自從小屋毀在原始設定之後~一切從頭再來T-T

10-06 19:07

東東o兔↙：
打包~
但是....@-@
我不會耶嗚ˊˋ"
可惡我比較笨嗎Q"Q
感恩分享^^

10-07 02:21

Fａiｎt：
薔薇大你好~
那個...這個語法我在用時好像會有點問題...
我用background:transparent;想把背景變透明但是失敗了,用background-color:#000000;讓背景變黑(因為字是設定白色的) 都沒辦法,但是我放圖的語法跟改高度之類的測試卻可以,單純改背景就沒辦法...
現在留言區都看不到字蠻困擾的,還要反白....囧
語法↓
textarea {
background:transparent;
padding-left: 10px;
padding-right:10px;
height:200px;
}

10-07 18:57

夏日薔薇：
background-color:;
顏色拿掉10-08 19:27

公主‧公主：
讚!!

10-10 11:55

人造人間十一號：
請問留言區的寬度可以拉高嗎？圖片寬度有點過高，頭跟尾都被斬掉了一些= ="

偏偏又是GIF動態圖，大小一修改就不會動了..

10-11 16:08

夏日薔薇：
/*留言處和回應處插圖*/
textarea {
background:url(http:);
background-repeat:no-repeat;
background-position:right;
padding-left:10px;
padding-right:10px;
height:195px;<=====這邊可以改高度10-11 17:49

小慢：
請問一下，我不知為何小屋的主圖被修掉了...>"<
現在找不到可以放圖的地方...(不是上面的大圖喔)

10-14 15:55

夏日薔薇：
XD剛剛去看了一下
應該是找回來了^^10-14 20:35

『小林健太』：
不知道為什麼
一直無法改出來呢....

/*留言和回應區插圖*/
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;
}

10-26 22:51

夏日薔薇：
我試是正常的喔@@~10-27 16:00

張弦：
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;
}

出不來有哪裡要修正的誰可以幫我看一下謝謝

11-04 03:11

夏日薔薇：
我看是正常的喔11-04 13:27

花漓：
737

11-04 19:59

花漓：
我是要打˙ˇ˙...

11-04 19:59

文月．魚：
.home_input2{
color:#464646;
border:1px #FFA600 dashed;
background:transparent; ←上面跑不出來的板友，請確定這裡的背景不是這樣(透明語法)喲。
}

11-06 18:54

文月．魚：
回推一下:P

11-06 18:54

小夜 Sayo：
請問一下夏日薔薇大~~
您的這個語法是將背景設定成圖片~~
但是這個圖片會因為留言字行過多而跑上去~~
要怎麼樣才能不管字行再多，圖片會固定住不會往上跑??
也就是說怎麼樣才能讓圖片不受捲軸的影響而固定住??
因為我看有別人就是固定住的，不管打字再多行，圖片都不會往上跑~~

11-08 10:11

小夜 Sayo：
抱歉，夏日薔薇大~~
我已經找您的教學了，所以上面的問題就當我沒問吧~~XD

11-08 20:36

夜煌：
水

11-11 20:34

Aquarius楓：
找到..打包=.=

謝哩^^"

11-17 23:57

夢-放下然後記得微笑：
推推推..太棒了><謝謝大大!!!

小屋開始變美美了ˇˇ

01-23 14:38

全哥：
.

02-25 14:02

紫苑：
謝謝教學～

08-01 11:44

紫苑：
那個……夏日薔薇大~~
我還是弄不到透明的那個。

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

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

但是我看來是沒有問題的，可是就是出不來。

08-01 11:46