HTML如何设置video为不透明背景
程序员文章站
2022-03-07 11:45:48
...
HTML设置video为不透明背景的方法:使用loop,autoplay方法,直接插入相关代码【<video src="../video/2b.mp4" loop="loop" autoplay="autoplay"></video>】。
本教程操作环境:windows7系统、html5版,DELL G3电脑,该方法适用于所有品牌电脑。
HTML设置video为不透明背景的方法:
先插入如下代码:
<video src="../video/2b.mp4" loop="loop" autoplay="autoplay"></video>
loop
表示循环播放autoplay
表示自动播放
css修饰如下:
<style> body{ margin:0;//body外边距设为0; } video{ position: fixed;//视频定位方式设为固定 right: 0; bottom: 0;//视频位置 min-width: 100%; min-height: 100%; //不会因视频尺寸造成页面需要滚动 width: auto; height: auto; //尺寸保持原视频大小 z-index: -100; //z轴定位,小于0即可 -webkit-filter: grayscale(20%);//添加灰度蒙版,如果设定为100%则视频显示为黑白 } </style>
相关学习推荐:html教程
以上就是HTML如何设置video为不透明背景的详细内容,更多请关注其它相关文章!
上一篇: javascript如何用dom方法来删除div添加div
下一篇: 【SpringBoot】解决前后端分离的跨域‘Access-Control-Allow-Origin‘ header in the response must not be the wildcard
推荐阅读
-
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
-
PPT怎么更换背景如何设置背景图片为PPT幻灯片锦上添花
-
android如何设置Activity背景色为透明色
-
如何将视频设置为网页背景
-
为网页设置背景音乐_html/css_WEB-ITnose
-
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
-
html的ul标签如何设置背景图片!!_html/css_WEB-ITnose
-
求解.如何给网页背景设置成一张不重复的图片?_html/css_WEB-ITnose
-
框覆盖时会覆盖背景但不覆盖文字,如何设置?_html/css_WEB-ITnose
-
【请教】如何实现横向布局时图片A居中宽度固定,左右两侧由不同的图片B、C填充为背景_html/css_WEB-ITnose