創作內容

24 GP

【CSS閒語】想搞個透明版面？自機CSS網誌範本概略公開中。

作者：櫻澤楓│2007-09-24 22:33:37│巴幣：0│人氣：6289
※：因小屋已於2010年11月4日改版後廢除CSS功能設計，即日起本篇文章已無參考作用，
僅保留作為歷史文章精華之用途。


基本語法設定（比如說顏色、版面、主選單跟次選單等）可以參考如語娃娃，淵姐
異姐，以及夏日薔薇板友所提供的語法教學。

不過，覺得還是看如語板友的CSS教學最好，也是最齊全的CSS概略語法整理就是。

不懂基本的語法設計？請參考如語板友的CSS教學。

或是可以參考啻異板友的「簡單的貫通CSS的使用概念」一文。

針對透明語法，簡單大略敷衍（喂！）的說一下。

基本上，要搞透明這個玩意，首先一定要記得這以下三個CSS語法字串：
「FILTER: Alpha(opacity=0);」
「display:none;」
「transparent」

除了「FILTER: Alpha(opacity=0);」（"opacity=0"這字串是調整透明度，數值範圍0～100）
以及「display:none;」可以把部分版面搞成透明之外
「transparent」這個字其實也可以搞成透明的喔。


例如說像右下選單這種不容易改的語法：

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

上述用了加了「transparent」關鍵語法字串之後，原本藍色跟灰色框框
一下子就可以變成透明版面了喔。


再以最上方大圖為例：

.banner{
background:transparent;
height:0px;
padding-left:20px;
padding-top:15px;
}/*小屋上方主圖*/

「background:transparent;」這個字串的意思就是可以讓背景變透明
至於修改後圖片的高度（height:0px;），看是要修改多少像素（px）皆可。

還有巴哈小屋圖其實也可以拿來隱藏，語法範例如下：

.cover_pic{
height=0px;
}/*COVER圖*/

如果把「height=0px;」這個字串，取代成「display:none;」這個字串
基本上也是通用的，效果都是只會讓版圖隱藏而已。

（9月25日 16：21新增）
某位板友提供的隱藏帳號跟稱號的辦法
剛才試過以後，真的可以隱藏帳號說。XD

語法關鍵就在於「visibility:hidden;」，是一種不常見的CSS特殊隱藏語法
昨天才剛剛發現到的這樣。


大概就是這樣子...所以只要記得那三個可以讓部分版面透明的關鍵語法
然後看看哪個項目可以適合加入透明語法字串的，通通都給它加進去就是了啦
加了之後，隨時都可以讓有些版面，或者是讓某些物件（比如按鈕等）變透明，進而可以看到背景圖
不過也有些版面用了之後，未必可以讓此版面變成透明
這時候就應該換換別的透明語法字串，或是檢查看看哪裡有加錯項目的地方。

本人不太會教....所以對CSS教學一事特別肉腳><
只能放上範本供人參考。

以下版本為9月18日當天修改的最終版本
因為找不到能夠適合本網誌的下個背景圖片....所以可能要久一點才能大改了。

（OS：不過這不是才剛剛改的而已......(拖走)）

若有太複雜，或是有不清楚的，請見諒
可以適時地去參考其他人的CSS教學，或是其教學範本。

記住，當搞透明版面搞成功之後，因為是可以看見背景圖的版面
所以記得要把字體顏色改一改喔
免得當背景是暗系背景，字型顏色卻搞成黑色
這樣就看不到小屋的字體顏色了喔。XD

<----------（以下是範本設定）----------->


/*--------------------------整體頁面設定--------------------------*/

BODY{
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #F5F1E8;  
SCROLLBAR-DARKSHADOW-COLOR: #F5F1E8;
SCROLLBAR-ARROW-COLOR: #F5F1E8;
SCROLLBAR-TRACK-COLOR: #000000;
background: #000000;
}

BODY{cursor:crosshair};
a:hover {cursor:crosshair;}
a:active  {cursor:crosshair;}
a:hover   {cursor:crosshair;}


/*-------------小屋區表單背景設定-------------*/
div.left {
background:transparent;
}
div.leftOut1{
background:transparent;
}
div.leftOut2{
background:transparent;
}
div.leftDown {
background:transparent;
}
div.right {
background:transparent;
}
div.rightDown {
background:transparent;
}
div.container {
background :url(http://);
background-repeat : no-repeat;
background-color : #000000;
background-position :0% 0%;
}
div.main {
background:transparent;
}
div.mainOut {
background:transparent;
}
div.footer {
background:transparent;
}

/*------全體按鈕(名字可以自訂自己看的懂的)-----*/
.button_c1{
color:#F5F1E8;}

.button_c1 img{
display:none;}

.button,.button2,.button3,.button_h1,.button_h2.button4{
background:transparent;
border-top: 1px dotted #F5F1E8;
border-right:0px dotted #F5F1E8;
border-bottom:1px dotted #F5F1E8;
border-left:0px dotted #F5F1E8;
color: #C9B9B4;
}


/*------滑鼠移入效果(名字可以自訂自己看的懂的)-----*/
.button:hover,.button2:hover,.button_h1:hover,.button_h2:hover,.button3:hover,.button4:hover{
background:transparent;
border-top: 1px dotted #FFFFFF;
border-right:1px dotted #FFFFFF;
border-bottom:1px dotted #FFFFFF;
border-left:1px dotted #FFFFFF;
color: #FFFFFF;
}

/*------右下的標題格式-------*/
.post_title {
height:40px;/*圖片高度*/
background-image:url(http://);
background-position:center;
COLOR: #F5F1E8;
PADDING-left:60; /*←文字與左方的距離，請自行調整。*/
PADDING-top :5; /*←文字與上方的距離，請自行調整。*/
}

/*------右下的標題list格式-------(就是白色那一塊)*/
.post_list{
PADDING-left:10px; /*文字與左方的距離*/
PADDING-top :0px; /*文字與上方的距離*/
border-top: 0px solid #362023;
border-right:0px solid #362023;
border-bottom:0px solid #362023;
border-left:0px solid #362023;
background:transparent;
COLOR: #F5F1E8;
list-style:url(http://);
}

/*-----今日訪客等等的灰色外框-----(紅色那一塊)*/
.postbox2{
border:0px dashed #F5F1E8;/*其實灰色框框外面還有一圈很細的灰色框線，這讓你改那一條*/
background: transparent;/*讓你把灰色換成別的顏色*/
}
/*-----post_list裡面改不掉的那一圈白色-----(藍色那一塊)*/
.postboxin{background:transparent;/*讓你把藍色塗掉*/
}
/*標籤基本*/
.post_list ul{
list-style-type: none; /*無設定標籤*/
margin: 0px; /*內文與邊界距離*/
padding: 0px; /*邊框空白寬度*/
}
/*標籤有連結*/
.post_list a{
color:#FFFFFF; /*文字顏色*/
border-bottom: #F5F1E8 0px solid; /*文字有底線*/
width: 100%; /*寬度一定要設定100%，讓它讀取巴哈預設的寬，不然整個選單會移位*/
background:  no-repeat left center;
padding-left: 5px; /*與左邊框空白距離*/
display: block;
}
/*滑鼠移入標籤*/
.post_list a:hover{
background:none;
color:#F5F1E8; /*文字顏色*/
}


/*----整體文字----*/
TD{
color: #F5F1E8;
font-size:13px;
line-height:150%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}
A:link{
color: #F5F1E8;
text-decoration:none;
}/*還未造訪連結狀態*/
A:visited{
color:#FFFFFF;
text-decoration:none;
}/*造訪過後連結狀態*/
A:hover{
color:#FFFFFF;
text-decoration: underline;
}/*滑鼠移入連結狀態*/
.extend{
color:#C9B9B4;
}
.extend a:link,.extend a:visited{
color:#C9B9B4;
}/*特殊連結(藍色)及屋主文章留言*/
.extend2{
color:#C9B9B4;
}
.extend2 a:link,.extend2 a:visited{
color:#FFFFFF;
}/*GP數與驗證碼顏色*/
.extend3{
color: #F5F1E8;
}
.extend3 a:link,.extend3 a:visited{
color: #F5F1E8;
}/*灰色－備註與說明文字*/
/*----其他共用部分----*/
.line{
border-bottom:1px dashed #F5F1E8;
}/*虛線*/
.line2{
border-top:0px solid #F5F1E8;
}/*實線*/
.article_pic{
border:none;
height: 0px;
width: 0px;
}/*文章或畫作的縮圖邊框*/
.home_input1{
color: #F5F1E8;
border:1px dashed #F5F1E8;
background-color:transparent;
}/*input實線(只用於引用文章網址處)*/
.home_input2{
color: #C9B9B4;
border:1px dashed #F5F1E8;
background-color:transparent;
}/*input實線*/
/*--------------------------框架------------------------------*/
.infom_bk{
border-left:0px solid #F5F1E8;
border-right:0px solid #F5F1E8;
border-bottom:0px solid #F5F1E8;
border-top:0px solid #F5F1E8;
padding-top:5px;
background:transparent}
/*小屋首頁－勇者資料區背景色*/
/*----外部大框架設定----*/
.category_title{
height:40px;
}/*主標題一使用*/
.category_title2{
height:0px;
FILTER: Alpha(opacity=0);
}/*主標題二以下使用*/
.category_word{
background: url(http://) no-repeat;
font-size:15px;
font-weight:bold;
padding-left:57px;
padding-top:0px;
padding-bottom:0px;
}/*主標題文字設定*/
.category_bk{
background:transparent;
border-left:0px solid #F5F1E8;
border-right:0px solid #F5F1E8;
border-bottom:0px solid #F5F1E8;
border-top:0px solid #F5F1E8;
padding:12px;
}/*內文的背景色*/
.category_footer{
background:transparent;
height:0px;
}/*框架結束部分*/
/*----表格設定(置於大框架中)----*/
.box1{
border:0px dashed #F5F1E8;
}/*表格框線顏色*/
.box_title{
background:transparent;
font-weight:bold;
letter-spacing:1px dashed #F5F1E8;
}/*表格標題底色*/
.box_list1{
background-color:transparent;
}/*表格內文底色 1*/
.box_list2{
background-color:transparent;
}/*表格內文底色 2*/
.box_icon1{
background-image:url(http://pic.bahamut.com.tw/home/list_icon1.gif) no-repeat;
}/*三角形箭頭icon*/
.box_icon2{
background-image:url(http://pic.bahamut.com.tw/home/list_icon2.gif) no-repeat;
}/*圓形彈珠icon*/
/*-----------------------最上方顯示大圖-----------------------*/
.banner{
background:transparent;
height:0px;
padding-left:20px;
padding-top:15px;
}/*小屋上方主圖*/
.banner_t1{
color: #FFFFFF;
font-weight:none;
}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
/*無連結效果的文字顏色「()」*/
FILTER: Alpha(opacity=0);
color: #FFFFFF;
font-size:13px;
font-weight:none;
}/*暱稱和帳號文字*/
.banner_t3{
color:#FFFFFF;
line-height:18px;
}/*碎碎唸文字顏色*/
.banner_t4{
color: #F5F1E8;
line-height:0px;
}/*顯示官階的文字顏色*/
.banner_t5{
color: #F5F1E8;
line-height:10px;
}/*顯示稱號的文字顏色*/
/*---------------------------主選單---------------------------*/
.menu{
background:transparent;
height:0px;
margin-top:0px
}/*選單背景圖*/
/*----選單所在頁面狀態----*/
.menuIN{
background:url(http://) no-repeat;
font-weight:bold;
color: #F5F1E8;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
font-weight:none;/*文字粗體設定*/
color: #FFFFFF;/*文字顏色設定*/
height:35px;/*表格的高度*/
line-height: 35px;/*內文的文字行高*/
text-align:center;/*文字置中*/
text-decoration:none;/*刪除文字的連結底線*/
}
/*----選單非所在頁面狀態----*/
.menuout {
font-weight:bold;
COLOR:#8F9A7C;
height:35px;
line-height: 35px;
text-align:center;
text-decoration:none;
}
.menuout a:link,.menuout a:visited {
font-weight:bold;
color:#8F9A7C;
height:35px;
line-height: 35px;
text-align:center;
}
.menuout a:hover {
background:url(http://) no-repeat;
font-weight:bold;
color:#FFFFFF;
height:35px;
line-height: 35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}
/*---------------------------次選單---------------------------*/
/*----無次選單狀態----*/
.menubarA1{
background:transparent;
border-left:0px solid #430C11;
border-right:0px solid #430C11;
border-top:0px;
border-bottom:0px solid #430C11;
padding:25px;
}/*次選單與主選單連接部分*/
.menubarA2{
background:transparent;
border-left:0px solid #430C11;
border-right:0px solid #430C11;
border-top:0px #FFFFFF;
border-bottom:0px solid #430C11;
padding:0px;
}/*次選單結束部分*/
/*----有次選單狀態----*/
.menubarB1{
background:transparent;
border-left:0px solid #430C11;
border-right:0px solid #430C11;
border-top:0px #430C11;
border-bottom:0px #430C11;
padding:0px;
}/*次選單與主選單連接部分*/
.menubarB3{
background:transparent;
border-left:0px solid #430C11;
border-right:0px solid #430C11;
border-top:0px solid #430C11;
border-bottom:0px solid #430C11;
padding:0px;
text-align:left;
}/*放次選單按鈕的背景色*/
.menubarB2{
background:transparent;
border-left:0px solid #430C11;
border-right:0px solid #430C11;
border-top:0px solid #430C11;
border-bottom:0px solid #430C11;
padding:0px;
}/*次選單結束部分*/
/*----------------------------小屋封面圖------------------------------*/
.cover_pic{
HEIGHT:0px;
}/*COVER圖*/
/*--------------------勇者基本資訊和能力表--------------------*/
.heartGP{
color: #F5F1E8 ;
}/*給紅心的敘述文字*/
.apprise_bg{
background-color:transparent;
background-repeat:no-repeat;
background-attachment: fixed;
background-position:0% 0%;
}/*評價區底色*/
.ability {
background-color:transparent;
BORDER-RIGHT: #F5F1E8 0px dashed;
BORDER-TOP:#F5F1E8 0px dashed;
BORDER-LEFT:#F5F1E8 0px dashed;
BORDER-BOTTOM:#F5F1E8 0px dashed;
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px;
LINE-HEIGHT:14px;
HEIGHT:0px;
TEXT-ALIGN:left;
TEXT-DECORATION:inherit;
}/*顯示個人能力數值的底圖*/

.ability_pad img{
visibility:hidden;
}/*GP跟BP圖片消失*/

.ability_pad{
background-color:none; /*無背景色*/
background-image : url(http://); /*背景圖址*/
background-repeat:no-repeat;
} /*背景圖不重複*/
/*---------------------各文章列表區(下方)---------------------*/
/*----個人部落閣----*/
.article_t1{
color: #F5F1E8;
font-size:15px;
TEXT-DECORATION:none;
font-weight:none;
}
.article_t1 a:link, .article_t1 a:visited{
color:#FFFFFF;
font-size:15px;
TEXT-DECORATION:none;
font-weight:none;
}/*個人部落閣文章標題顏色*/
.articlebox{
background:transparent;
background-position:center;
border:1px dashed #F5F1E8;
padding:10px;
width:700px;
height:55px;
}/*個人部落閣最新文章及GP值底色*/
.article_hr{
border:1px dotted #F5F1E8;
color: #F5F1E8;
}/*個人部落閣文章版主回應分色線*/
/*----個人精華區----*/
.elite{
color: #F5F1E8;
font-size:13px;
TEXT-DECORATION:none;
}
.elite a:link, .elite a:visited{
color: #F5F1E8;
font-size:13px;
TEXT-DECORATION:none;
}/*個人精華文章標題顏色*/
.elite_ppl{
font-weight:bold;
font-size:12px;
border:1px dashed #F5F1E8;
background-color:transparent;
}/*收藏人數文字顏色和底線框色*/
.home_h4{
color:#F5F1E8;
font-size:13px;
}
喜歡24 收藏 103 引用 留言 推上首頁 檢舉
引用網址：https://home.gamer.com.tw/TrackBack.php?sn=252188
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：CSS

2024 的個人網頁設計
火狐Firefox CSS樣式：套件管理員美化
火狐Firefox CSS樣式：美化套件管理按鈕
火狐Firefox CSS樣式：隱藏書籤、歷史按鈕選單的多餘選項完整版
火狐Firefox CSS樣式：回復舊版89分頁列

留言共 36 篇留言

銀色彗星：
天阿...好長一串...(爆)
看來要慢慢挖了...囧rz

09-24 22:46

櫻澤楓：
不懂得話也沒關係
反正頂多去鑽研一下別人的CSS教學應該就會懂了。09-25 14:48
斑目：
很實用XD

09-25 00:08

㊣粉紅蝴蝶娃娃㊣：
看不太懂ㄎㄎ 中秋節快樂^0^

09-25 12:43

櫻澤楓：
中秋節快樂。XD09-25 14:47
逆時雨：
楓大~上面的語法可以借我用嗎="=
想要改板面不過最近沒時間慢慢調..
改天有空再大改(￣▽￣")a

10-03 21:41

櫻澤楓：
沒問題。10-03 21:56
浪蕩者：
您好
先借您的設定一用 我再慢慢摸索改成我喜歡的~
一下子要搞懂實在太困難了^^"

10-09 00:05

浪蕩者：
抱歉 再請問一下
請問您的底圖怎麼會固定不動? 滑鼠上下拉時 只有物鍵動 底圖是不動的

10-09 00:27

櫻澤楓：
background-attachment: fixed;

記得這個字串要加在BODY{}框裡面才行喔。
10-18 22:20
黑胡椒：
看了一下還是不知道主要的CSS文法在哪邊...
不知道板大可不可以把CSS透明的文法跟我說一下
我在貼上我那邊

10-31 00:29

蕭瑟印：
嗯..慢慢研究

10-31 17:33

鬼：
看起來好難阿
先用看看您提供的語法好了~

11-05 18:25

小剛使出喬伊小姐：
謝謝小楓分享>ˇ<

今天看到馬上就來修改了QWQ

不過很多地方還...冏

11-05 19:19

櫻澤楓：
加油。 :)11-05 23:11
阿基仔：
好複雜~
先打包起來
再慢慢研究
謝謝大大的教學~

11-09 02:33

昨日夢醒今日醉：
這篇大人寫得很詳細，
不好意思大人，
我要推回去收藏><~推

11-17 11:27

安生魘夢：
我是笨蛋:)
根本看不懂:D

11-30 21:31

Genjyo Sanzo 戀物者：
先借用大大的,到時在回來改進...超感謝推一下!

12-31 16:27

Glass：
二話不說，先收藏+推再講　XD

01-01 18:51

雨藤．荒：
好棒=ˇ=

01-05 22:12

HuaiSwhy：
我推`

01-09 23:02

飛琉：
暫時拿大大的格式來用一下，之後再來研究怎麼改，
感謝推一下！

01-18 16:04

彩虹〃妞：
謝謝分享

01-19 18:40

雀躍的小胖子：
請問一下~

我本來是想用你的語法在修改~

怎麼會寫語法錯誤，請修改(2)

這是什麼問題??

01-20 19:40

櫻澤楓：
也許是系統的問題，或許可以稍等一段時間請再修改看看
目前為止是沒問題的。01-24 23:29
清水國中殺人犯郭秉紳：
哪有透明阿~根本是一片白?

01-24 20:45

櫻澤楓：
您是從火狐上看的嘛？
還是語法哪裡有拼錯導致架構崩壞等等問題？

剛才測試了一下，範本到目前為止都還能用
請先去檢查哪邊語法有問題吧。01-24 23:32
清水國中殺人犯郭秉紳：
阿~可以了
後來用了某位大大的去除頁面上層 中層 下層 的語法之後
在套用你的就有透明了
原來整個頁面有3層阿~光用透明語法還不夠~

01-26 00:01

夏侯嵐.沛國：
請問一下如果要套用你的透明語法
又要顯示背景的圖片要怎麼做呢?
我試了好久
背景就是不出現ˊˋ
背景的位置只會出現一片黑OTZ...
可以教一下要怎麼顯示出背景嗎Q"Q

01-29 22:43

夏侯嵐.沛國：
0.0背景被我搞出來了
真神奇XD

01-29 22:52

夏侯嵐.沛國：
現在是背景出來了但是右邊本來是黑色的選單全變成白色了ˊˋ

01-29 23:37

永遠的謎：
我也像呆呆a瑜一樣，也出現這樣的畫面

我是全刪，然後再貼上你所貼的範本

請問這樣哪裡出錯了?

02-03 16:36

櫻澤楓：
請參考此串第三篇

--
基本上，勇者大廳那已經有不少人發問這種類似問題了
算是種老問題了吧。="=02-03 20:03
st002：
請問一下
要把部落格最新文章那邊的巴哈姆特去掉我會了
但是我不想放圖
我想把他靠左
請問怎麼改?

02-07 19:03

まどか御守：
櫻抱歉~學習中(推推

02-12 23:28

卡姆伊：
說真的，一想到要修改一堆東西
就會整個懶起來不想搞(死

02-19 23:16

緋月迷情：
感謝分享＾＾

03-11 18:10

小桔：
謝謝><

03-26 21:00

*摘星子*：
大大您好:
不好意思
我把一些語法放到自己的小屋裡了
(少部分而已)
現在才來告知,非常對不起^^"

非常感激大大無私地提供範本語法和教學~~
在此深深一鞠躬<(_ _)>

05-05 22:09

龍薩爾達：
赞！这是最完整的CSS！！！

07-27 17:33

黑運：
CSS....好棒呀=口=!!

08-13 08:30

GGYY：
實在太感謝大大分享囉~~推推

12-08 23:51

STFS Silent Wing：
無意間連進來的,但是因為板大的文章讓我成功的把背景弄成透明的了!
在此大感謝 m(_ _)m

12-15 20:44

我要留言提醒：您尚未登入，請先登入再留言

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

前一篇：花椰菜10周年紀念作「公... 後一篇：9/25…某某楓的煙火日...

追蹤私訊切換新版閱覽

作品資料夾

一般生活記事 (170)
└櫻の每日一記（塵封） (662)
└黏土人拍攝‧紀錄專串（塵封） (134)

存檔類別文章 (109)
└偶活 x 遊戲王‧妄想設定集（秘封） (7)
└動物朋友 冒險回憶錄（秘封） (3)
└新‧彈幕無雙系列（秘封） (3)

站方相關活動 (6)

霧雨魔菇狂想曲（塵封） (21)
└特文館備份 (41)

とある幻想の極限磁砲（塵封） (2)

特文館舊有投稿文章 (33)
└東方相關投稿 (5)

未分類 (11)

aaa1357932 給 大家：
各位有空可以來我家看看畫作或聽聽我的全創作專輯！看更多我要大聲說5小時前


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

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