使用ActiveX插件时object显示问题,div被object标签遮挡的解决方案_云端的幻影的博客-程序员ITS301

技术标签: 多媒体  前端  ActiveX  IE  object  

起因

设计要求视频控制面板显示在视频界面上,如下图红框内所示。但是因为object不在文档流之中,所以不论别的元素设置z-index多高,都只会被object元素遮住而无法看到。
object元素代码如下

<object
  id="EZUIKit"
  width="400"
  height="400"
  border="0"
  name="EZUIKit">
</object>

在这里插入图片描述

解决方案

方法一: 直接设置属性值

在代码中增加属性

	value="transparent"
<object
   id="EZUIKit"
   width="400"
   height="400"
   border="0"
   value="transparent"
   name="EZUIKit">
 </object>

在谷歌等浏览器中有效,但是IE中无效,因为需要activeX插件支持,必须兼容IE,所以此方法不适用,尝试第二种方法

方法二:iframe

iframe 元素会创建包含另外一个文档的内联框架,所以将object元素或者要放置在object上的元素包含在iframe中,可以做到高于object元素显示,我选择的是后者,将需要显示在视频上的内容嵌入iframe中的页面

<iframe>
	需要显示在object上的标签内容
</iframe>

确实可以显示在object元素之上,但是却不透明。如下图,会一整块遮挡住下面的视频内容。
在这里插入图片描述
设置属性allowtransparency="true"后在谷歌浏览器中会透明,可以显示下面的视频,但IE中无效,所以需要继续尝试。

<iframe allowtransparency="true">
</iframe>

设置iframe的背景色透明

<iframe allowtransparency="true" style="background-color: transparent">
</iframe>

设置后iframe背景透明,但是却无视了中间的object,穿透了object,直接显示的是iframe所在的父元素背景色,即使将iframe父元素设置透明也无用,会继续显示父元素的父元素背景色,无法显示该区域遮挡住的视频内容。

结论

IE中无法做到div元素显示在上并背景色透明的效果,谷歌可以实现,IE建议除非需要整块遮挡下面的视频而不需要透明,否则将需要放置在object上的元素移出来,与object互不干涉。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44849078/article/details/89160520

智能推荐

android webp格式的图片,Android应用中对webp格式图片的处理_科技松鼠会的博客-程序员ITS301

1、为何用webp格式webp格式能够将图片尽可能小得压缩,这个在移动应用中使用很广,且技术较成熟。java2、编译动态库包编译的动态库包的源码参照GitHub地址请添加连接描述android个人环境Android Studio3.0.1gradle 3.3jdk 1.8.0_101ndk-build android-ndk-r10e-windows-x86_64git导入Android Stud...

python 构建来源gis_ArcGIS Python编程案例(10)-获取GIS数据列表和描述信息_weixin_39534759的博客-程序员ITS301

我们将在本章介绍以下几个案例:获取工作空间内的要素类列表使用通配符限制返回的要素类列表使用要素类型限制返回的要素类列表获取要素类或表中的字段列表调用Describe()函数返回要素类的描述信息调用Describe()函数返回栅格数据的描述信息调用Describe()函数返回工作空间信息引言Python脚本提供了执行批处理操作的功能。这将帮助你完成自动化工作流程并提高数据处理效率。举个例子,你可能需...

IAR下μCosIII移植心得_yunhuibin的博客-程序员ITS301_iar 移植ucos3

2种方法的移植体验让我有了想法一、野火和网上的移植方法相同之处都是下载ucosIII源文件,原封不动的拷过来UcosIII源文件的获取:从官网www.micrium.com下载ucosIII源文件https://www.micrium.com/downloadcenter/download-results/?searchterm=hm-stmicroelectronics&amp...

icem cfd中Edge Param 函数翻译_rex011的博客-程序员ITS301

icem cfd中Edge Param 函数翻译icem cfd中Edge Param 函数翻译BiGeometricBiGeometricThe default bunching law. The two initial heights and ratios define parabolas in a coordinate system where the number of node poi

输出<object returned empty description>_smuglx的博客-程序员ITS301_逆向打印出现 <object returned empty description>

出现这种状况应该是和我一样打断点时用po打印输出的结果。字面上的意思就是  返回空描述可以用NSLog来打印输出查看。我打印的是NSString类型,是一个空字符串@"";

js移除某个class_用JS添加和删除class类名_O超哥的博客-程序员ITS301

下面介绍一下如何给一个节点添加和删除class名添加:节点.classList.add("类名");删除:节点.classList.remove("类名");以tab切换为例:在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给被选中的tab新增一个class名,然后改这个class名的样式。比如 起一个class名叫“active”设置样式.active{color: #...

随便推点

Mir2源码详解之服务端-登录网关(LoginGate)_weixin_30888707的博客-程序员ITS301

传奇这款游戏,一直对我的影响很大。当年为了玩传奇,逃课,被老师叫过N次家长。言归正传,网上有很多源码,当然了,都是delphi的。并且很多源码还不全,由于一直学习的c、c++。delphi还真不懂。无奈硬着头皮上。好了。废话不多说。开始。登录网关,负责游戏最开始的登录处理(与账户服务器LoginSvr通讯)。验证登录器输入的账户密码是否正确。界面上的控件很多。其实干活的就 就...

C linux 深入学习,对linux/UNIX errorfunc错误处理部分的代码注释备忘_洪大宇的博客-程序员ITS301_unix_error在linux下

#include &lt;stdarg.h&gt;#include "error_functions.h"#include "tlpi_hdr.h"#include "ename.c.inc" /* Defines ename and MAX_ENAME */#ifdef __GNUC__ /* Prevent 'gcc -Wall' complaining */__attribute__ ((__noreturn__)) /* if we

sun.misc.BASE64Decoder和sun.misc.BASE64Encoder不可用【解决办法】_发芽ing的小啊呜的博客-程序员ITS301_sun.misc.base64

sun.misc.BASE64Decoder和sun.misc.BASE64Encoder不可用【解决办法】一、问题描述原因分析二、解决办法1、替换JDK公共API2、切换JDK版本叮嘟!这里是小啊呜的学习课程资料整理。好记性不如烂笔头,今天也是努力进步的一天。一起加油进阶吧!

吐槽下目前最新的Qt5.13.0(618发布)_觉行无量的博客-程序员ITS301

5.13.0的吐槽。选在618前后发布Qt,不知是仓促还是草率?总体来看,新的更新对初中级玩家没有多少令人感动的地方,反而新的帮助文档让人失望。

Spring官网阅读(六)容器的扩展点(一)BeanFactoryPostProcessor_程序员DMZ的博客-程序员ITS301_spring必须掌握的bean增强扩展点与加载流程

之前的文章我们已经学习完了BeanDefinition的基本概念跟合并,其中多次提到了容器的扩展点,这篇文章我们就开始学习这方面的知识。这部分内容主要涉及官网中的1.8小结。按照官网介绍来说,容器的扩展点可以分类三类,BeanPostProcessor,BeanFactoryPostProcessor以及FactoryBean。本文我们主要学习BeanFactoryPostProcessor,对...

K8S -- CKA、CKAD考试经验_victoruu的博客-程序员ITS301_ckad

1.证书简介CKA:Kubernetes管理员认证(CKA)旨在确保认证持有者具备履行Kubernetes管理员职责的技能,知识和能力。 CKA认证可帮助经过认证的管理员在就业市场中快速建立自己的信誉和价值,并能帮助公司更快地雇用高质量的团队来支持他们的发展如果企业想要申请KCSP,条件之一是:至少需要三名员工拥有CKA认证CKAD: Kubernetes应用程序开发人员认证(CKAD)旨在确保CKAD具备履行Kubernetes应用程序开发人员职责的技能,知识和能力。 经过认证的Kube...

推荐文章

热门文章

相关标签