創作內容

18 GP

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

作者：小角落..│2008-02-06 15:20:30│巴幣：2│人氣：9150

本文引用自此
本文引用自此
本文引用自此
本文引用自此
本文引用自此

如果這篇看的一點都不懂的話，請看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.像橘色部分的那個框框