創作內容

33 GP

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

作者:夏日薔薇│2007-09-05 16:00:35│贊助:0│人氣:5908
想要讓回應和留言框有個美美的小插圖嗎?



請將下面語法貼到/*----整體頁面設定------*/下
並將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;
背景在X軸重複 background-repeat : repeat-x;
背景在Y軸重複 background-repeat : repeat-y;

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

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

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

不改背景,直接改回應區字體的顏色,語法如下
text {
color:# xxxxxx;
}
備註:#xxxxxx;顏色可自行參考色碼表
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=504195
All rights reserved. 版權所有,保留一切權利

相關創作

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

留言共 63 篇留言

Secret
感謝分享教學^^~

09-05 16:36

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

09-05 16:43

狐幫主
感謝分享0ˇ0
看了各位高手,狐應該開一個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
白兔
謝謝辛苦寫教學˙ˇ˙
透明語法…嗯!我a走了╮( ̄▽ ̄)╭

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

啦啦噗
真的很厲害XD~~~

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

Faint
薔薇大你好~
那個...這個語法我在用時好像會有點問題...
我用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

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

11-08 10:11

小夜.水瀨秋子
抱歉,夏日薔薇 大~~
我已經找您的教學了,所以上面的問題就當我沒問吧~~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

爛瑜衝樹
非常感謝薔薇大大的教學喔!!!

09-05 10:56

柳月〃
這個一定要推,我想用在無名的部落格裡XD

11-03 14:12

夜雨
感謝分享^^

11-13 22:49

雖尾道人 金豪洨
如何讓背景圖固定呢@"@?可以講解一下嗎?

11-23 21:39

恆淵
感謝囉>< 請問大大 如何把背景圖 像是電腦桌面那樣大 我看一些部落閣把畫面往下移
然後圖跟著往下 而且圖只有1張不重複 自己把圖弄大 可是失真了><

01-03 18:56

我要留言提醒:您尚未登入,請先登入再留言

33喜歡★janeyang 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:CSS-巴哈小屋教學... 後一篇:CSS自定板面-連結跳動...

追蹤私訊

作品資料夾

miaomei20大家
歡迎至line貼圖小舖搜尋:「閃電熊米米 / 海豹胖騎士」,也可至小屋看看~~喜歡可以支持一下,謝謝><看更多我要大聲說昨天12:00


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】