iframeの背景の透明度を設定する方法-jsチュートリアル-php.cn

iframeの背景の透明度を設定する方法

高洛峰

リリース： 2016-12-24 16:55:10

オリジナル

1250 人が閲覧しました

IE5.5 は、フローティングフレームのコンテンツの透明性のサポートを開始します。フローティングフレームに透明なコンテンツを定義する場合は、次の条件を満たす必要があります。
1. iframe 要素で使用されるallowTransparencyタグ属性はtrueに設定する必要があります。
2. iframeコンテンツのソースドキュメントでは、background-colorまたはbody要素のbgColorタグ属性をtransparentに設定する必要があります

<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe>

ログイン後にコピー

もちろん、iframeページに色が設定されていないことが前提です。上記では、主に style ="background-color=transparent" のコードスタイルを示しています。次の 4 つの IFRAME 記述方法を通じて、iframe の背景透明効果を実現する方法を明確に理解できると思います。

<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME>

ログイン後にコピー

それでは、見てみましょう。例を見てください

この例は主に iframe です。この属性が true に設定され、iframe によって読み込まれるページの背景色が透明に設定されている場合、iframe は透明になります。
allowTransparency は、オブジェクトを透明にできるかどうかを設定または取得します。
bgColor はオブジェクトの背景色を設定または取得します

親ページ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>父页面</title>
</head>
<body bgcolor="#FF0000">
<iframe src="index.htm"  allowTransparency="true"></iframe>
</body>
</html>

ログイン後にコピー

子ページ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>子页面</title>
<style type="text/css">
body
{
    background-color: transparent; 
}
</style>
</head>
<body>
</body>
</html>

ログイン後にコピー

iframe の背景の透明度を設定する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。