The iframe frame sets the white background to transparent in IE browser
|
Recently, I need to frequently use iframe to draw the hierarchical framework of the page in the process of doing the project. Most browsers have no background, but iframe has a white background color by default in IE. When the main background color is not white, it will appear very abrupt in this part. The solution is given in the help manual, which is to set the allowTransparent attribute in the iframe to true. Corresponding examples are also given in the help document, as follows: Copy code The code is as follows:<BODY STYLE="background-color: red"> <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> </BODY> Theoretically, there is no problem doing this, but IE doesn't seem to respond much and there is still a white background. In fact, at this step, we also need to add <body bgColor="transparent"> to the <body> tag of the subpage, as shown below: http://img.blog.csdn.net/20140610165850968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva3VucGVuZ19tdWJhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center main.html main page code: Copy code The code is as follows:<html> <head> <title></title> </head> <body style="background-color:blue;"> <table style="width:100%;border:0;height:100%;cellpadding:0;cellspacing:0"> <tr height="100%"> <td height="100%" width="30%"> <iframe id="test1" src="test1.html" allowTransparency="true" width="100%" height="100%"></iframe></td> <td height="100%" width="40%"> <iframe id="test2" src="test2.html" allowTransparency="true" width="100%" height="100%"></iframe></td> <td height="100%" width="30%"> <iframe id="test3" src="test3.html" width="100%" height="100%"></iframe></td> </tr> </table> </body> </html> test1.html page code: Copy code The code is as follows:<html> <head> <title></title> </head> <body bgcolor="transparent"> <h1>test1</h1> </body> </html> test2.html page code: Copy code The code is as follows:<html> <head> <title></title> </head> <body> <h1>test2</h1> </body> </html> test3.html page code: Copy code The code is as follows:<html> <head> <title></title> </head> <body> <h1>test3</h1> </body> </html> This small example mainly applies the allowTransparency attribute of the iframe tag. When this attribute is set to true and the background color of the <body> tag of the subpage loaded by the iframe is set to transparent, the iframe will become transparent. allowTransparency sets or gets whether the object can be transparent. bgColor Sets or gets the background color of the object. |
<<: Detailed explanation of Nginx passively checking the server's survival status
>>: How to generate mysql primary key id (self-increment, unique and irregular)
Recommend
How to deploy MongoDB container with Docker
Table of contents What is Docker deploy 1. Pull t...
Introduction to MySQL <> and <=> operators
<> Operator Function: Indicates not equal t...
How to deploy a simple c/c++ program using docker
1. First, create a hello-world.cpp file The progr...
Solve the problem that Docker pulls MySQL image too slowly
After half an hour of trying to pull the MySQL im...
Ideas and codes for implementing Vuex data persistence
What is vuex vuex: is a state manager developed s...
A brief discussion on CSS3 animation jamming solutions
Why is it stuck? There is a premise that must be ...
How to solve the problem of MySQL query character set mismatch
Find the problem I recently encountered a problem...
Analysis of the principles and usage of Docker container data volumes
What is a container data volume If the data is in...
A simple way to restart QT application in embedded Linux (based on QT4.8 qws)
Application software generally has such business ...
An example of using Lvs+Nginx cluster to build a high-concurrency architecture
Table of contents 1. Lvs Introduction 2. Lvs load...
JavaScript implements div mouse drag effect
This article shares the specific code for JavaScr...
Detailed explanation of the steps of using ElementUI in actual projects
Table of contents 1. Table self-sorting 2. Paging...
How to install and modify the initial password of mysql5.7.18 under Centos7.3
This article shares with you the installation of ...
How to install lua-nginx-module module in Nginx
ngx_lua_module is an nginx http module that embed...
Vue component organization structure and component registration details
Table of contents 1. Component Organization 2. Co...