Comment définir la transparence de l'arrière-plan iframe-js tutoriel-php.cn

Comment définir la transparence de l'arrière-plan iframe

高洛峰

Libérer： 2016-12-24 16:55:10

original

1285 Les gens l'ont consulté

IE5.5 commence à prendre en charge la transparence du contenu des frames flottants. Si vous souhaitez définir un contenu transparent pour un cadre flottant, les conditions suivantes doivent être remplies.
1. L'attribut de balise allowTransparency utilisé avec les éléments iframe doit être défini sur true.
2. Dans le document source du contenu iframe, l'attribut de balise bgColor de l'élément background-color ou body doit être défini sur transparent

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

Copier après la connexion

Bien sûr, le principe est que la couleur n'est pas définie. dans la page iframe.
Dans ce qui précède, nous avons principalement vu le code style="background-color=transparent" avec style Grâce aux quatre façons suivantes d'écrire IFRAME, je pense que vous devriez avoir une compréhension claire de la façon de le faire. obtenir l'effet de transparence de l'arrière-plan 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>

Copier après la connexion

Regardons maintenant un exemple
Cet exemple applique principalement l'attribut allowTransparency de l'objet iframe Lorsque cet attribut est défini sur true et la couleur d'arrière-plan de l'objet iframe. La page chargée par l'iframe est définie sur transparente, l'iframe sera transparente.
allowTransparency définit ou obtient si l'objet peut être transparent.
bgColor définit ou obtient la couleur d'arrière-plan de l'objet

Page parent

<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>

Copier après la connexion

Page enfant

<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>

Copier après la connexion

Pour plus d'articles sur la façon de définir la transparence de l'arrière-plan iframe, veuillez faire attention au site Web PHP chinois !