文章發佈於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>

arrow
arrow
    全站熱搜

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

    E-mail轉寄