使用Firefox 瀏覽器時的透明版面

2007090221:56

您是不是花了很多心思，打造了具有個人風格的版面，可是使用Firefox 瀏覽器時，卻發現版面的透明度無效，整個版面變得比沒修改時不好看，真是有點失望。如果您和我有相同的困擾，請來試試這個方法...

第一種方法

這是小精靈提供的透明底圖 http://blog.roodo.com/idea_et32/cd342afa.gif

您將這一張透明底圖套進去語法，就能在 Firefox 瀏覽器下都變透明

/*文章內文背景圖*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfotable, #yusrintro p{background: url(http://blog.roodo.com/idea_et32/cd342afa.gif) no-repeat;}

/*Main content header*文章標題背景圖/
.yc3pribd .mhd{ background:url(http://blog.roodo.com/idea_et32/cd342afa.gif) repeat; color:#333;}

/*左右欄位內容底圖*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{background: url(http://blog.roodo.com/idea_et32/cd342afa.gif) no-repeat;}

/*Nav module header*左右欄位標題底圖/
.yc3sec .mhd, .yc3subbd .mhd{ background:url(http://blog.roodo.com/idea_et32/cd342afa.gif) repeat; color:#333;}

/*部落格最上方控制列背景圖及文字顏色(置頂區)*/
#yhtw_masthead{background: url(http://blog.roodo.com/idea_et32/cd342afa.gif) no-repeat;}

/*部落格底圖*/
#yblogtitle .mbd,#yblogtitle .mft{background: url(http://blog.roodo.com/idea_et32/cd342afa.gif) no-repeat;}

/*招呼語底圖*/
#yblast .bg {background: url(http://blog.roodo.com/idea_et32/cd342afa.gif) no-repeat;}

/*shared rounded corner for all modules無框線語法*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url() left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url() right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url() left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url() right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url() repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url() right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

第2種方法。（旋心幻律於2007/10/18 07:16 回應）

旋心幻律告知，不用加透明圖。（請參考回應的部份）

只要在每個想要呈現透明的部分，使用這語法 background:url( )

也就是說，背景底圖使用透明圖，在 Firefox 瀏覽器下就會變透明，您只要將您版面上的所有圖片都加上這張透明圖，就可變透明了，但是GIF 檔只能作透明底圖，而無法作半透明底圖，所以在 Firefox 瀏覽器下，一是透明底圖，一是不透明底圖，沒有半透明。

如果您的招呼語設定隱藏，或置頂圖設定隱藏，就不需要貼透明圖，也就是說，您只要選您有使用的部份語法來貼就成了。然後加上無框線語法，整個版面就變成透明了。

這張↓是加透明圖以前，Firefox 瀏覽器下的版面