自助投稿功能已开通,点击【开始投稿】,优质内容审核通过后可获得积分并在全网免费展示

Iframe标签的使用以及主要使用的属性大全,让视频更炫酷

作者: 黎想 分类: 网站运维,黎想博客随笔 发布时间: 2022-03-19 18:39

iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe属性。

1、iframe 定义和用法

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

2、属性

New :HTML5 中的新属性。

3、示例

1、iframe框架
代码如下:
<iframe src="https://www.test.net" width="200" height="500">
该网站使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问。
</iframe>

2、iframe透明
在transparentBody.htm文件的<body>标签中,我已经加入了style="background-color=transparent" 通过以下四种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>

3、iframe大小控制

<html>
<head>
<title>显示视频指定区域</title>
</head>
<body>
<div align="center" style="margin:0 auto;">

<div style="width:800px;height:600px;overflow:hidden;border:0px">
<div style="width:500px;height:800px;margin:-100px 0px 0px -10px;">
<iFrame src="直播或视频地址" width="800" height="380" allowfullscreen="true" allowtransparency="true" scrolling="no">
</iFrame>
</div>
</div>
</div>
</body>
</html>

           

版权声明:

1、除特别说明外,本博客内容皆为原创,可以自由转载传播,但请署名及注明出处链接

2、本博客内容遵守“署名-非商业性使用-禁止演绎 4.0 国际”协议(CC BY-NC-ND 4.0