文章發佈於Sevendesign,如需轉貼請保留本訊息,並註明原文連結
原文連結:http://sevendesign1230.pixnet.net/blog/post/4059353

在網頁設計的時候用到iframe的時候,有時後會因為有背景色但跟整體的頁面看起來卻有點卡卡的,但是若是在設計的時候就有想到這點,並把iframe的背景透明化,讓整塊iframe與整個頁面融為一體,那麼所呈現出來的視覺就會更為完美喔!

其實設定的方法很簡單,只要開啟iframe允許透明的設定,之後再將要嵌入網頁中背景色設為透明,就可完成iframe透明的夢想了。

 

※iframe背景透明化

父頁面 <iframe>與</iframe>內加入 allowtransparency="true"

<iframe src="data1.htm" allowtransparency="true" scrolling="auto" border="0" cellspacing="0" cellpadding="0" frameborder="no" width="440" align="left" height="550" style="FILTER: Chroma(Color=#FFFFFF)" ></iframe>

子頁面 body處加上 background-color:transparent

<body style="background-color:transparent">

※iframe捲軸透明化

父頁面 <iframe>與</iframe>內加入style="FILTER: Chroma(Color=#FFFFFF)"

<iframe src="data1.htm" allowtransparency="true" scrolling="auto" border="0" cellspacing="0" cellpadding="0" frameborder="no" width="440" align="left" height="550" style="FILTER: Chroma(Color=#FFFFFF)" ></iframe>

說明:#FFFFFF為欲透明的色碼,以下列為例,只要色碼為#FFFFFF的設定,皆會被透明化

子頁面需加入以下語法

<STYLE type="text/css">
<!--
html{
scrollbar-face-color:#FFFFFF;/*最大區域顏色*/
scrollbar-highlight-color:#FFFFFF;/*左上陰影*/
scrollbar-3dlight-color:#585858;/*左上線條*/
scrollbar-darkshadow-color:#585858;/*右下線條*/
scrollbar-shadow-color:#FFFFFF;/*右下陰影*/
scrollbar-arrow-color:#585858;/*箭頭顏色*/
scrollbar-track-color:#FFFFFF;/*底色*/
}
-->
</STYLE>

Seven 發表在 痞客邦 PIXNET 留言(0) 人氣()