When doing web development, you may encounter the situation where flash blocks elements in the page. No matter how you set the depth (z-index) of the flash container and layer, it will not help. The existing solution is to add it to the embed or object tag of the flash inserted. "wmode" attribute and set it to wmode="transparent" or "opaque", but what exactly does the wmode attribute mean and why it can be solved
In flash tag
"Window" uses the movie's own rectangular window to play the application on the Web page, always on top.
"Opaque" displays the content behind it on the page.
"Transparent" causes the background of the HTML page to show through any transparent parts of the application and may reduce animation performance.
Note: "Opaque" and "Transparent" both interact with HTML layers, allowing the layer above the SWF file to shadow the application. The difference between the two options is that "Transparent" allows for transparency, so if a portion of the SWF file is transparent, the HTML layer underneath the SWF file will show through that portion, while "opaque" will not. .
That is, if FLASH covers the DIV layer, you must change the wmode attribute to "Transparent"
When doing web development, you may encounter the situation where flash blocks elements in the page. No matter how you set the depth of the flash container and layer (z-index), it will not help. The existing solution is to insert the embed or object of flash. Add the "wmode" attribute to the tag and set it to wmode="transparent" or "opaque", but what exactly does the wmode attribute mean and why can it solve this problem?
window mode(wmode)
There are three types of wmode, that is, window mode. Take a look at Macromedia’s official statement back then:
Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.
Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example , with dynamic HTML) to prevent them from showing through.
Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.
window mode
The default display mode. In this mode, the flash player has its own window handle, which means that the flash movie is a display instance that exists in Windows and is on top of the browser core display window. , so flash only appears to be displayed in the browser, but this is also the fastest and most efficient rendering mode for flash. Since it is an HTML rendering surface independent of the browser, this causes flash to always cover all DHTML layers that overlap with it in the default display mode.
However, most Apple computer browsers will allow the DHTML layer to be displayed on top of flash, but strange phenomena will occur when the flash movie is played. For example, the DHTML layer will display abnormally as if a piece of it has been scratched off by flash.
Opaque Mode
This is a windowless mode. In this case, the flash player does not have its own window handle, which requires the browser to tell the flash player when and where to draw on the browser's rendering surface. At this time, the flash movie will not be higher than the browser's HTML rendering surface but will be on the same page as other elements, so you can use the z-index value to control whether the DHTML element covers the flash or is covered.
Transparent mode
Transparent mode. In this mode, the flash player will set the background color alpha value of the stage to 0 and only draw the objects that are actually visible on the stage. You can also use z-index to control the depth value of the flash movie. , but unlike Opaque mode, this will reduce the playback effect of flash movies, and setting wmode="opaque" or "transparent" in flash player versions before 9.0.115 will cause the full-screen mode to fail.
After understanding the implementation and significance of various modes, you can choose to set the value of the wmode attribute according to specific circumstances in future development.