使用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 瀏覽器下的版面

這張是↓加了透明圖之後,Firefox 瀏覽器下的版面。

   您看~~是不是使用Firefox 瀏覽器時,也和使用IE 瀏覽器時一樣呢?

這張是↓使用IE 瀏覽器時的版面...

    希望您喜歡~~