给网页添加动态视频背景 html+css
【摘要】 前言:
普通图片: 给网页添加背景图片 html+css 动态: 就是换成MP4格式作为网页背景。
实现:
定义html的video标签:
<video src="xiamu.mp4" class="bjimg" autoplay loop muted></video>
1
在url里写入自己视频地址就好~
添加css样式就完成了:
.bjimg ...
前言:
普通图片:
给网页添加背景图片 html+css
动态:
就是换成MP4格式作为网页背景。
实现:
- 定义html的video标签:
<video src="xiamu.mp4" class="bjimg" autoplay loop muted></video>
- 1
在url里写入自己视频地址就好~
- 添加css样式就完成了:
.bjimg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; object-fit: cover; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
object-fit: cover; 保持原有尺寸比例。但部分内容可能被剪切。
- 效果:
总结:
文章来源: blog.csdn.net,作者:北极光之夜。,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/luo1831251387/article/details/112971653
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)