創作內容

17 GP

css - 背景教學+透明化 (2009/6/20)

作者:小角落..│2008-02-06 15:20:30│贊助:0│人氣:5953
本文引用自此
本文引用自此
本文引用自此
本文引用自此
本文引用自此


如果這篇看的一點都不懂的話,請看css - 超級新手教學
如果找不到自己想要的,請看css - 導引 (看圖說故事)
如果沒有自己想要的效果,請看css - 語法說明
想要找小細部的設定,請看css - 各區塊分類解說圖(2009/4/13)
(不過這要20元喔!!不想花錢的可以看巴哈提供的分類區塊解說圖)

這裡是其他大大的css教學css - 巴哈css教學網
色碼表、上傳空間、螢幕檢色器css - 好用軟體+好文推薦


附上已經改好的CSS碼,
沒有包含屋頂部份。 2009/6/20

css - 全透明背景css碼


◎圖片要上傳到http://..某處..不能放在自己電腦..
我是放在這裡
樂多日誌(不過沒有資料夾可以編輯,有點麻煩><)

1.這次要改的是這張圖..


這是簡單版,建議用進階版(在下面)-----4/17

/*--------------------其他背景--------------------*/
/*---紫色背景---*/
body {background:purple;}

/*-----綠色框線-----*/
div.mainOut {
border:green 5px dashed;
background:none;}

/*-----右下紅色-----*/
div.main { background:red;}

/*-----主要橘色-----*/
div.left {background:orange;}

/*-----最下面黑色-----*/
div.footer {
background: #000000;
border: solid lightgreen 0px; /那條淺綠色線/}


4.『確定送出』

以上引用自
小屋系統預設圖片更換教學 - PART 7(背景完全攻略)

這是上圖的原始設定,請點圖放大觀看(或是去上面網址抓XD)



◎若要換成圖片..可將 background:orange;更改成background: url(http://網址) no-repeat;

◎#000000為色碼..可自行更改..英文的話不用加『#』,可參考色碼表
ps.
repeat:圖片重複     no-repeat:圖片不重複
background-attachment:fixed;/*圖片位置要固定*/需要的話..複製貼到div.{}內


★進階版(表格透明)

這個寫法是讓上面那張..
紅色橘色黑色部分通通透明..
顯露出紫色部分的圖片..
像這樣..我是設定成黑色系(懶的去找圖片XD)
BODY {background:purple;} 這行可以改成
background:url(http://網址) no-repeat;(變成一張圖片,而不是單色)
像這樣..


這是透明的語法,直接複製貼到最下面
/*-------------小屋區表單背景設定-------------*/
body{background: url(http://) no-repeat fixed;}/*--背景圖--*/
div.left {background: none;}
div.leftOut1{background: none;}
div.leftOut2{background: none;}
div.leftDown {background: none;}
div.right {background: none;}
div.rightTop {background: none;}
div.rightDown {background: none;}
div.container {background: none;}
div.main {background: none;}
div.mainOut {background: none;}
div.footer {background: none;
border: solid darkblue 0px;}
--------------3/24補

這裡有以上區塊的說明..
如語娃娃(indream228) 【小屋】CSS自訂版面:進階─修改中間背景篇
css - div
若要全部透明..
不要有白色的部分..
等我慢慢更新..XD




右邊透明化

像這樣↓

這是下面註解的說明圖↓

這是語法
/*------右下的標題list格式-------(就是白色那一塊)*/
.post_list{
background:none;/*讓你把白色改成別的顏色(變透明)*/
color:#333;/*文字顏色*/
}
/*-----今日訪客等等的灰色外框-----(紅色那一塊)*/
.postbox2{
border:0px dashed;/*其實灰色框框外面還有一圈很細的灰色框線,這讓你改那一條*/
background:none; /*讓你把灰色換成別的顏色(變透明)*/
}
/*-----post_list裡面改不掉的那一圈白色-----(藍色那一塊)*/
.postboxin{background:none;/*讓你把藍色塗掉(變透明)*/
}

『確定送出』
background:transparent;
background: none;這句話的意思是把背景變透明,
若想改成其他顏色可寫成
background:#F6CDD7;





消除標題灰底


以下複製貼到最下面..
/*------右下的標題格式-------*/
.post_title {
height:40px;/*圖片高度*/
background:none;
background-position:left;
color: #333; /*文字顏色*/
padding-left:30; /*←文字與左方的距離,請自行調整。*/
padding-top :15; /*←文字與上方的距離,請自行調整。*/
}






內文的背景色

修改後↓


將category_bk內的語法,改成這樣
.category_bk{
border-left:1px none;
border-right:1px none;
padding:17px;
background:none;
}/*內文的背景色*/





消除選單

找到 menu.menuIN.menuout.menubarA1.menubarA2這四個地方
將他們background後面改成 none; (像這樣background:none;)
若還有一條深綠色線,將menubarA1.menubarA2內,這兩個的border,後面都改成0px。




若想去除這兩張


找到 category_title.category_footer這2個地方,
將他們background後面改成 none; (像這樣background:none;) 詳細內容可參考..css - 首頁標題底圖更換教學
去除後





部落格內框
這裡↓

改成這樣↓

.articlebox{
border:0px solid #7DC8D0;/*外框線*/
background-color:none;
padding:5px;
width:100%;
}/*個人部落閣最新文章及GP值底色(BOLG那個內框框)*/



巴哈姆特龍消失

改成這樣↓
.article_pic{
border-left:0px dashed #F67383;
border-right:0px dashed #F67383;
border-top:0px dashed #F67383;
border-bottom:0px dashed #F67383;
border:none;
height: 0px;
width: 0px;
}/*文章或畫作的縮圖邊框*/




勇者資料區背景色

修改後↓


將infom_bk內的語法,改成這樣
.infom_bk{
border-left:1px none;
border-right:1px none;
border-top:1px none;
padding-top:10px;
background:none;
}/*小屋首頁-勇者資料區背景色*/






勇者資料區+個人相關資訊內框

修改後↓


將box_list1內的語法,改成這樣
.box_list1{
background:none;
}/*表格內文底色 1(勇者基本資料底色+個人相關資訊)*/






勇者資料區+好友創做紀錄+能力值內框

修改後↓


將box_list2內的語法,改成這樣
.box_list2{
background:none;
}/*表格內文底色 2(好友創作底色+能力值底色)*/






勇者基本資料+能力值底色

就是這裡↓


改成這樣↓

/*----表格設定(置於大框架中)----*/
.box1{
border:0px solid #D9ECF0;/*這是旁邊那條線*/
}/*表格框線顏色*/

.box_title{
background:none;
font-weight:bold;
letter-spacing:2px;
}/*表格標題底色*/






這是最後完成的樣子↓
(2月6號)

消除最上面綠色那塊,
.banner{
background:none;/*將主圖消除*/
height:120px;/*圖片的高度*/
padding-left:20px;/*帳號暱稱距離左邊20px*/
padding-top:15px;/*帳號暱稱距離上面15px*/
}/*小屋上方主圖*/





消除小人物那邊..

[font= size=2 color=#009000]
.cover_pic{
height:0px;
background:none;}

詳細修改可以看css - 上方主圖教學
css - 小屋封面圖教學




收藏人數

將elite_ppl,改成下面那樣
.elite_ppl{
color:#49A1B3;
font-weight:bold;
font-size:12px;
border:0px solid #9A9A9A;
background:none;
}/*收藏人數文字顏色和底線框色*/






按鈕
以下原本沒有,複製貼上吧XD..
/*---------------------------按鈕:------------------------------*/
.button3,.button4{/*-----勇造下的按鈕+[給紅心]+[搜尋]-----*/
border-top:#757575 0px dashed;
border-right:#757575 0px dashed;
border-bottom:#757575 0px dashed;
border-left:royalblue 0px solid;
background:none;
text-align: center;
color:#000;}


.button2,.button_h2{/*-----[看更多]+[訂閱他的小屋]-----*/
background:none;
border:#000 0px dashed;
}

.button_c1{color:#000;} /*按鈕文字顏色*/
/*.button_c1 img{display:none;}*//*--隱藏收藏『+』--*/

/*------------------滑鼠移入按鈕---------------*/
.button2:hover,.button3:hover,.button4:hover{
background:none;
border-top:#757575 0px dashed;
border-right:royalblue 0px solid;
border-bottom:royalblue 0px dashed;
border-left:royalblue 0px solid;}



很複雜..請看css - 按鈕教學





訂閱小屋按鈕
這段還是沒有,請複製貼上..
/*-------訂閱小屋按鈕(一般狀態)------------*/
.home_order_button{/*display:none;*/
/*隱藏訂閱小屋按鈕*/
color:#757575;}
.home_order_button:hover{
background:transparent;
text-align: center;
color:#aaa;
text-decoration: underline;}





/*----------------------新勇者能力值----------------------*/



.home_DATAbutton ul li.loveA{background:none;width:69px;height:36px;text-align:center;}/*紅心背景上*/
.home_DATAbutton ul li.loveA a{height:10px;font-size:15px;color:#0042c8;font-weight:bold;}/*紅心文字*/
.home_DATAbutton ul li.loveA a:hover{color: #FF6666;}

.home_DATAbutton ul li.loveA2 a{;background:none;width:69px;height:29px;}/*紅心背景下*/
.home_DATAbutton ul li.loveA2 a:hover{background:none;}/*給紅心-文字*/

.home_DATAbutton ul li.loveR{background:none;width:69px;height:36px;text-align:center;}/*紅心背景下*/
.home_DATAbutton ul li.loveR a{height:10px;font-size:15px;color:#0042c8;font-weight:bold;}
.home_DATAbutton ul li.loveR a:hover{color: #FF6666;}/*角色紅心數量-文字*/

.home_DATAbutton ul li.loveR2 a{background:none;display:block;width:69px;height:29px;}
.home_DATAbutton ul li.loveR2 a:hover{background:none;width:69px;height:29px;}/*角色給心-文字*/

.home_DATAbutton ul li.hello a{width:142px;height:36px;background:none;}/*按鈕-打招呼*/

.home_DATAbutton ul li.to1 a{background:none;} /*碎碎念*/
.home_DATAbutton ul li.to2 a{background:none;} /*訂閱*/
.home_DATAbutton ul li.to3 a{background:none;} /*好友*/
.home_DATAbutton ul li.to4 a{background:none;} /*寫信*/
.home_DATAbutton ul li.to5 a{background:none;} /*黑掉*/
.home_DATAbutton ul li.to6 a{background:none;} /*送禮*/

.home_dataBG {border: powderblue 0px solid; background:none;}
/*背景*/
.home_data {
background: url(http:none; }
/*勇者數值鈕*/
.home_dataUP {border: #d3c87a 1px solid; background: #000; }/*能力值背景色*/
.home_dataUP TD {font-size: 10px; line-height: 14px;} /*能力值文字*/



碎碎念選單



.pointer{
border-left::1px solid #757575;
border-right:1px solid #757575;
background:none;
height:37px;
}

/*---碎碎念選單開始---*/
.pointer{
border:0px solid #757575;
background:none;
height:37px;}
.pointer a:hover{background:none;}
.pointer a:link{background:none;}
.pointer a:visited{background:none;}

.pointerIN{
background:none;
font-weight:bold;
color:#757575;
line-height: 24px;
text-align: center;
text-decoration: none;}

.pointerIN a:hover{
background:none;
font-weight:bold;
color:#757575; height:24px;
line-height:24px;
text-align:center;
text-decoration: none;}

.pointerIN a:link,.pointerIN a:visited{
background:none;
font-weight:bold;
color:#757575;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;}


.pointerout {
background:none;
font-weight:bold;
color:#757575;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;}

.pointerout a:link,.pointerout a:visited {
background:none;
font-weight:bold;
color:#757575;
height:24px;
line-height:24px;
text-align:center; }

.pointerout a:hover {
background:none;
font-weight:bold;
color:#757575; height:24px;
line-height:24px;
text-align:center;
text-decoration: none;}

.home_eraser {display:none;} /*隱藏區塊【刪除鈕】*/

input{ /*碎碎唸輸入框*/
background:#fff;
color:#757575;
border:1px solid #cccccc;
}


a.homeTALKsend{/* 送出那顆按鈕 */
display:block;
border:0px solid #757575;
}

/*---碎碎念選單結束---*/

終於全部透明化了~感動>Q<--2008.3.4





背景加外框
1.像橘色部分的那個框框

2.將這行文字複製到最後面~
或是貼將border那行貼到之前的body {background:purple;}
body{border: 20px solid #000;}

3.『完成』






以上引用自門外漢寫的,背景變透明教學,不懂不要問我-_-
如語娃娃(indream228) 【小屋】CSS自訂版面:進階─網頁外框、背景、卷軸、項目符號
若有不懂的語法,可參考css - 語法說明
引用網址:http://home.gamer.com.tw/TrackBack.php?sn=474499
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:|css|

留言共 21 篇留言

閒晃的路人
推!

02-10 17:42

小角落..
感謝^^02-11 23:07
喚風
實用喔^^
找一陣子了~
剛好看到 XD

02-11 23:45

小角落..
感謝支持~CSS不定時更新=ˇ=
很多人都寫DIV{}部分
其他要自己找@@..
我只是整合在一起XD02-12 10:47
皇羅
這篇不推不行
整理的太強了
大感激

03-11 11:37

小角落..
我剛剛也修改的很累XD
大家透明化都寫一半的@@..03-11 12:14
銀紋
看到整個眼花了啊~~

03-11 22:35

小角落..
眼花!?
背景的關係嗎@@?
資料太龐大了~
一堆..
-------------------
就看你想要改哪裡~
拉捲軸在去看吧..@@
不然也可以看導引..03-11 23:34
小C…
感謝大大分享Q_Q

03-12 19:20

小角落..
不會~加油^^03-12 19:21
卡姆伊
圖文教學讚啦~

03-15 12:56

小角落..
感謝..
不過我圖片有時候會當掉=口=03-15 13:47

好物好物^^

我就不客氣的收下拉~

04-12 13:21

小角落..
請隨意~嘻^^04-15 08:35
西行寺天子
非常有用 謝謝

06-18 01:48

小角落..
很高興有幫上忙唷^^
寫的有點亂XD06-20 08:40
愛莉希亞
妳好@@"教學很受用~
但是怎麼樣才能上下看文章,但背景不會跟著上下而轉動
不然要變圖片要複製好幾張...這樣好討厭><"
妳來看看我小屋的背景圖就知道了,還請幫忙

03-07 07:53

小角落..
在body{}內加入
background-attachment:fixed; /*圖片位置要固定*/
就可以了^^03-07 11:31
又回歸人間的老骨灰
感謝...

04-07 11:30

默默
幫助很大
找了很多人的CCS教學
小角落的最淺顯易懂
收精華囉
謝謝你^^

06-21 17:00

小角落..
謝謝你的收藏,
老實說我覺得蠻複雜的@@06-23 22:26
月宵
挖屋哇....感謝大大的教學,解決了在下這幾個禮拜的疑惑!
只能給1個gp真的是太少了,實在想給大大10個gp才能表達感謝之意!

10-17 17:26

小角落..
css很久沒更新了~
希望有幫上忙喔^^10-20 22:52
月宵
能幫上太多忙了,在下小屋已經煥然一新了XD

10-23 13:43

小角落..
^^12-30 12:41
水鏡爺爺
太感謝您了!!
我弄了老半天總算弄好了

12-24 20:57

小角落..
恭喜阿^^12-30 12:40
玖玖
我也是太感謝你囉>w<

03-05 01:16

小角落..
不用這麼客氣啦^^03-08 22:15
孫大砲
按照大大的教學試了兩天
總算把勇者能力值區塊全透明化了@@!
http://home.gamer.com.tw/friendList.php?page=2&owner=drsun1112&t=A&a=24
非常感謝您!! ︿︿

04-05 18:03

小角落..
為什麼是連到好友名單?
---
希望你看的懂^Q^04-05 21:48
孫大砲
耶~~真的耶 ^^||| 沒注意到
可以加個好友嗎?

04-05 22:02

小角落..
我不加好友的,不好意思XD05-11 14:22
無知的初心者
教學很讚!

05-09 22:21

小角落..
謝謝喔~還有很多不足之處~
有問題也歡迎提出,
我會慢慢補上(?)05-11 14:22
閃光の竜騎士
大大這篇文讓我受益良多啊
每次看到背景都被白白的擋掉就很難過

05-21 22:55

小角落..
有成功就好^^05-21 23:06
閃光の竜騎士
請問一下要怎麼樣才可以改成即時通知
我現在的小屋背景都不能點即時通知QAQ"

05-23 01:30

小角落..
可以拍張圖看一下嗎?
咦,留言是5月XD07-31 11:01
琉璃風
感謝指教

07-18 21:27

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

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

前一篇:可愛公園Online -... 後一篇:css - 按鈕教學...

訂閱

作品資料夾

asd8349105大家
小屋裡有會說話的兔子喔~看更多我要大聲說昨天13:45