css - 全透明背景css碼

作者：小角落..│2009-03-03 12:59:45│巴幣：2│人氣：5167

直接全選(Ctrl+A) ，複製(Ctrl+C) ，貼上(Ctrl+V) 。
不過很不美觀，字型方面都沒有設定，
還是要自己修改很多地方，
ps.沒有包含屋頂部份。

或是依照這篇↓自己一步一步修改，
css - 背景教學+透明化 (2009/6/20)

css - 全語法+圖片對照..2009/6/20

改的時候，改body中的http，放上你自己的圖片。
body{background: url(http://) no-repeat fixed;}/*--背景圖--*/

css - 文字部分的教學

/*--------------------------------語法開始----------------------------------------*/

.home_t3{font-size: 10pt;}/*留言版字變小*/
#Flash_curve{display:none;}/*---隱藏統計圖---*/

/*--精華區底線--*/
.unline a:link, .unline a:visited{TEXT-DECORATION: none;}/*隱藏精華區連結底線*/
.unline a:hover{TEXT-DECORATION: underline;}
/*.unline img{display:none;}*//*隱藏精華區小圖示、留言版勇造*/
/*.unline br{display:none;}*//*精華區摘要不分行*/
.category_bk tBODY{height:130%;} /*縮小精華區的行距*/

/*---碎碎念選單開始---*/
.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;
}

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

/*-------------小屋區表單背景設定-------------*/
body{background: url(http://i274.photobucket.com/albums/jj249/kiwi_mi/offer-bee/body.png) 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;}

/*------右下的標題list格式-------(就是白色那一塊)*/
.post_list{
background:none;/*讓你把白色改成別的顏色(變透明)*/
color:#333;}/*文字顏色*/

/*-----今日訪客等等的灰色外框-----(紅色那一塊)*/
.postbox2{
border:0px dashed;/*其實灰色框框外面還有一圈很細的灰色框線，這讓你改那一條*/
background:none; /*讓你把灰色換成別的顏色(變透明)*/
}
/*-----post_list裡面改不掉的那一圈白色-----(藍色那一塊)*/
.postboxin{background:none;}/*讓你把藍色塗掉(變透明)*/

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

/*---------------------------按鈕：------------------------------*/
.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;}

/*--------------------------整體頁面設定開始--------------------------*/
TD{
color:#464646;
font-size:13px;
line-height:150%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}/*整體文字*/

A:link{
color:#464646;
text-decoration:none;
}/*未造訪連結狀態*/

A:visited{
color:#464646;
text-decoration:none;
}/*造訪後連結狀態*/

A:hover{
color:#0064AF;
text-decoration: underline;
}/*滑鼠滑入連結狀態*/

.extend{
color:#326ADA;
}
.extend a:link,.extend a:visited{
color:#326ADA;
}/*藍色字*/

.extend2{
color:#FF0000;
}
.extend2 a:link,.extend2 a:visited{
color:#FF0000;
}/*紅色字*/

.extend3{
color:#000;
}
.extend3 a:link,.extend3 a:visited{
color:#000;
}/*灰色字(遊戲櫃連結文字)*/

.line{
border-bottom:0px dashed #969696;
}/*虛線*/

.line2{
border-top:1px solid #D9ECF0;
}/*實線*/

.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;
}/*巴哈姆特龍消失*/

.home_input1{
color:#999999;
border:1px solid #EFEFEF;
background-color:#FFF;
}/*input實線(只用於引用文章網址處)*/

.home_input2{
color:#464646;
border:1px solid #D5D5D5;
background-color:#FFF;
}/*input實線*/

/*-------------------------!整體頁面設定結束!-------------------------*/

/*-----------------------------主框架開始-----------------------------*/
.infom_bk{
border-left:1px none;
border-right:1px none;
border-top:1px none;
padding-top:10px;
background:none;
}/*小屋首頁－勇者資料區背景色*/

.category_title{
background:none;
height:40px;
}/*項目標題*/

.category_word{
color:#117E96;
font-size:15px;
font-weight:bold;
padding-left:85px;
padding-top:0px;
padding-bottom:2px;
}/*項目標題文字*/

.category_bk{
border-left:1px none;
border-right:1px none;
padding:17px;
background:none;
}/*內文的背景色*/

.category_footer{
background:none;
height:25px;
}/*框架結束*/

/*----------------------------!主框架結束!----------------------------*/

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

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

.box_list1{
background:none;
}/*表格內文底色 1(勇者基本資料底色+個人相關資訊)*/

.box_list2{
background:none;
}/*表格內文底色 2(好友創作底色+能力值底色)*/

/*---------------------------!表格設定結束!---------------------------*/

/*-------------------------區塊＃上方主圖開始-------------------------*/
.banner{
background: none;
height:120px;
padding-left:20px;
padding-top:15px;

}/*主圖*/

.banner_t1{
color:#757575;
font-size: 10pt; /*文字大小*/
}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#757575;
font-size: 10pt; /*文字大小*/
text-decoration:inherit;
}/*暱稱和帳號*/

.banner_t3{
color:#757575;font-size: 10pt; /*文字大小*/
line-height:18px;
height:42px;
}/*碎碎唸*/

.banner_t4{
color:#757575;font-size: 10pt; /*文字大小*/
}/*官階*/

.banner_t5{
color:#757575;font-size: 10pt; /*文字大小*/
}/*稱號*/

/*------------------------!區塊＃上方主圖結束!------------------------*/

/*--------------------------區塊＃主選單開始--------------------------*/
.menu{
background:none;
height:35px;
}/*選單背景*/

.menuIN{
background:none;
color:#000;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
color:#000;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}/*選單所在頁面*/

.menuIN a:hover {
background:none;
color:#fff; height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}/*非所在頁面狀態*/

.menuout {
COLOR:#000;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
.menuout a:link,.menuout a:visited {
color:#757575;
height:35px;
line-height:35px;
text-align:center;
}
.menuout a:hover {
background:none;
color:#fff; height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}/*非所在頁面狀態*/

/*-------訂閱小屋按鈕(一般狀態)------------*/
.home_order_button{
background:none;
width:100px;
text-align: center;
border-top:;
border-right:;
border-bottom:;
border-left:;
color:deeppink;
}

/*-------訂閱小屋按鈕(一般狀態的字顏色)------------*/
.banner a:visited{
color:#c93030;
background:none;
}

/*-------訂閱小屋按鈕(滑鼠移入狀態)------------*/
.home_order_button:hover{
background:none;
width:100px;
text-align: center;
border-top:;
border-right:;
border-bottom:;
border-left:;
color:#c93030;
text-decoration: underline;
}

/*-------------------------!區塊＃主選單結束!-------------------------*/

/*--------------------------區塊＃次選單開始--------------------------*/

.menubarA1{
background:none;
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:0px;
border-bottom:0px solid #5CBAC8;
}/*訪客看到狀態－主次選單連接處*/

.menubarA2{
background:none;
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*訪客看到狀態－次選單結束*/

.menubarB1{
background:none;
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*屋主看到狀態－主次選單連接處*/

.menubarB3{
background:none;
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:0px;
border-bottom:0px solid #5CBAC8;
padding:6px;
text-align:left;
}/*屋主看到狀態－放按鈕區域*/

.menubarB2{
background:none;
}/*屋主看到狀態－次選單結束*/

/*-------------------------!區塊＃次選單結束!-------------------------*/

/*--------------------------區塊＃封面圖開始--------------------------*/
.cover_pic{
height:0px;
background:none;}

/*-------------------------!區塊＃封面圖結束!-------------------------*/

/*-----------------------區塊＃勇者基本資料開始-----------------------*/
.home_dataBG{
display:block;
padding:0 0 0 8px;
font-size:12px;
border:solid #d9ecf0;
border-width:0px 1px 1px 1px;
background: url(http://pic.bahamut.com.tw/home/home_dataBG.gif) repeat-x;
}/*背景*/

.home_data{
display:block;
width:115px;
height:19px;
background: url(http://pic.bahamut.com.tw/home/home_data.gif) no-repeat center bottom;
margin:0 0 0 12px;
}/*勇者數值鈕*/

.home_dataUP{
border:1px solid #c1eefc;
background:#ffffff;
padding:3px;
}
.home_dataUP td{
font-size:10px;
font-family: "Courier New", Courier, monospac;
line-height:14px
}/*彈出框架設定*/

/*----------------------!區塊＃勇者基本資料結束!----------------------*/

/*----------------------區塊＃基本互動功能扭開始----------------------*/
.home_DATAbutton ul li.loveA{
margin:3px 0 0 0;
background:url(http://pic.bahamut.com.tw/home/home_loveA.gif) no-repeat;
display:block;
width:69px;
height:36px;
text-align:center;
}/*勇者紅心數量－背景*/

.home_DATAbutton ul li.loveA a{
display:block;
height:10px;
margin-top:14px;
font-size:15px;
color:#0042c8;
font-weight:bold;
}
.home_DATAbutton ul li.loveA a:hover{
color: #FF6666;
}/*勇者紅心數量－文字*/

.home_DATAbutton ul li.loveA2 a{
margin:0;
background:url(http://pic.bahamut.com.tw/home/home_loveA2.gif) no-repeat;
display:block;
width:69px;
height:29px;
}
.home_DATAbutton ul li.loveA2 a:hover{
margin:0;background:url(http://pic.bahamut.com.tw/home/home_loveA2in.gif) no-repeat;
}/*勇者給心－文字*/

.home_DATAbutton ul li.loveR{
margin:3px 0 0 4px;
background:url(http://pic.bahamut.com.tw/home/home_loveR.gif) no-repeat;
display:block;
width:69px;
height:36px;
text-align:center;
}/*角色紅心數量－背景*/

.home_DATAbutton ul li.loveR a{
display:block;height:10px;
margin-top:14px;
font-size:15px;
color:#0042c8;
font-weight:bold;
}

.home_DATAbutton ul li.loveR a:hover{
color: #FF6666;
}/*角色紅心數量－文字*/

.home_DATAbutton ul li.loveR2 a{
margin:0 0 0 4px;
background:url(http://pic.bahamut.com.tw/home/home_loveR2.gif) no-repeat;
display:block;
width:69px;
height:29px;
}
.home_DATAbutton ul li.loveR2 a:hover{
margin:0 0 0 4px;
background:url(http://pic.bahamut.com.tw/home/home_loveR2in.gif) no-repeat;
display:block;
width:69px;
height:29px;
}/*角色給心－文字*/

.home_DATAbutton ul li.hello a{
display:block;
width:142px;
height:36px;
background:url(http://pic.bahamut.com.tw/home/home_hello.gif) no-repeat;
}/*按鈕－打招呼*/

.home_DATAbutton ul li.to1 a{
margin:3px 0 0 0;
display:block;
width:71px;
height:23px;
line-height:23px;
background:url(http://pic.bahamut.com.tw/home/home_to1.gif) no-repeat;
text-indent:25px;
}/*按鈕－碎碎念*/

.home_DATAbutton ul li.to2 a{
margin:3px 0 0 0;
display:block;
width:71px;
height:23px;
line-height:23px;
background:url(http://pic.bahamut.com.tw/home/home_to2.gif) no-repeat;
text-indent:35px;
}/*按鈕－訂閱*/

.home_DATAbutton ul li.to3 a{
margin:3px 0 0 0;
display:block;
width:71px;
height:23px;
line-height:23px;
background:url(http://pic.bahamut.com.tw/home/home_to3.gif) no-repeat;
text-indent:25px;
}/*按鈕－加好友*/

.home_DATAbutton ul li.to4 a{
margin:3px 0 0 0;
display:block;
width:71px;
height:23px;
line-height:23px;
background:url(http://pic.bahamut.com.tw/home/home_to4.gif) no-repeat;
text-indent:35px;
}/*按鈕－寫信*/

.home_DATAbutton ul li.to5 a{
margin:3px 0 0 0;
display:block;
width:71px;
height:23px;
line-height:23px;
background:url(http://pic.bahamut.com.tw/home/home_to5.gif) no-repeat;
text-indent:25px;
}/*按鈕－黑名單*/

.home_DATAbutton ul li.to6 a{
margin:3px 0 0 0;
display:block;
width:71px;
height:23px;
line-height:23px;
background:url(http://pic.bahamut.com.tw/home/home_to6.gif) no-repeat;
text-indent:35px;
}/*按鈕－送禮*/

/*---------------------!區塊＃基本互動功能扭結束!---------------------*/

/*------------------------區塊＃個人部落閣開始------------------------*/
.article_t1{
color:#FF6600;
font-weight:bold;
}
.article_t1 a:link, .article_t1 a:visited{
color:#FF6600;
font-weight:bold;
}/*文章標題*/

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

.article_hr{
border:none;
background-color:#D9ECF0;
height:1px;
color:#D9ECF0;
}/*版主回應分色線*/

.home_scroll{
scrollbar-arrow-color:#067180;
scrollbar-face-color:#92D1DA;
scrollbar-highlight-color:#465059;
scrollbar-3dlight-color:#C6E6E6;
scrollbar-darkshadow-color:#067180;
scrollbar-track-color: #A0C9C9;
scrollbar-shadow-color: #2BA2B3;
}/*相關文章*/

/*-----------------------!區塊＃個人部落閣結束!-----------------------*/

/*------------------------區塊＃個人精華區開始------------------------*/
.elite{
color:#0055CB;
font-size:15px;
font-weight:bold;
}
.elite a:link, .elite a:visited{
color:#0055CB;
font-size:15px;
font-weight:bold;
}/*文章標題*/

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

/*-----------------------!區塊＃個人精華區結束!-----------------------*/

/*--------------------------區塊＃主機櫃開始--------------------------*/
.platform_pic{
border-left:1px solid #C4C4C4;
border-right:3px solid #C4C4C4;
border-top:1px solid #C4C4C4;
border-bottom:3px solid #C4C4C4;
}/*圖片邊框*/

/*-------------------------!區塊＃主機櫃結束!-------------------------*/

/*-----------------------區塊＃角色簽到列表開始-----------------------*/
td.avatar_sign1{
background:url(http://pic.bahamut.com.tw/home/home_avatar_talkbg.gif) no-repeat bottom;
position:relative;
margin:0;
padding:0;
}
span.avater_color1{
color:#0076a3;
}
p.avatar_talk1{
float:left;
margin:0;
padding:0;
}
p.avatar_talk2{
float:right;
margin:0;
padding:0;
}
p.avatar_talk3{
font-size:15px;
color:#7d4900;
padding:17px 10px 0 10px;
}
p.avatar_talk4{
text-align:right;
margin:0 10px 0 0;
}

/*----------------------!區塊＃角色簽到列表結束!----------------------*/

/*----------------------新勇者能力值開始----------------------*/
.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;} /*能力值文字*/

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

/*--------------------------------語法結束----------------------------------------*/

喜歡 6 收藏 5 引用留言推上首頁檢舉

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

相關創作

同標籤作品搜尋：|css|

2024 的個人網頁設計

火狐Firefox CSS樣式：套件管理員美化

火狐Firefox CSS樣式：美化套件管理按鈕

火狐Firefox CSS樣式：隱藏書籤、歷史按鈕選單的多餘選項完整版

火狐Firefox CSS樣式：回復舊版89分頁列

留言共 11 篇留言

蒼月：
...

03-03 15:42

小角落..：
0.003-03 18:03

霜語：
一隻烏鴉飛過去了..

03-03 18:16

小角落..：
哈哈哈..03-04 17:56

cobii9：
好酷XD！

03-03 19:38

小角落..：
對阿~我不希望訂閱我小屋的人..
點進來是...「金幣50」..
就給他...帶過阿^^"03-04 17:57

海王子：
真的很酷XD~
推一下小腳落~~^^

03-05 14:24

小角落..：
阿..被花現了..03-06 00:08

愛莉希亞：
小角落大@@
我用了這個教學+翻過去的舊文，把小屋翻修的很漂亮～XD
可是問題來了，我只想要有上方的主圖
但是副主圖這裡變成一片空白囧
連結在此
這有辦法補救嗎...希望能弄成白色的背景
(到小屋看更明顯有上下底但中間空空的~

07-08 07:05

小角落..：
[size=2][color=#ff0099]css - 上方主圖 + 封面圖!?[/color][/size]
妳應該是在說這篇↑
基本上妳說的那個框是.infom_bk
如果妳只要它是【白背景】，
那就寫.infom_bk{
background:#FFF;
border-left:1px solid #757575;
border-right:1px solid #757575;}

如果是想像我這樣【自製假框、或是小圖】
那就要寫到↓
div.left {background:url(http://網址) no-repeat;}

因為寫到infom_bk他會自已重覆，
試試看就知道我在說什麼了^^07-08 14:12

愛莉希亞：
>w<嘗試寫進去，更改ok了
感謝小角落大的熱心回答～ˇ
話說這個語法雖然說是全空白，但我發現背景你有預設張可愛的草原小狗狗圖片ˇ

07-08 23:16

小角落..：
是給你們換成想要的圖片咩!
有個圖片，比較容易發現在是寫在哪~01-25 18:47

神秘的野生皮卡丘：
我想用版面半透明的
照你上面那樣設定是看不到的
要怎樣設定呢?

11-19 19:02

小角落..：
抱歉，現在才回~~
麻煩去看看這篇..一步一步做看看
[url=http://home.gamer.com.tw/blogDetail.php?owner=kinini&sn=2328][size=2][color=deeppink]css - 背景教學+透明化 (2009/6/20)[/color][/size][/url]11-21 20:33