给网页添加动态视频背景 html+css

举报
北极光之夜。 发表于 2021/04/24 02:09:18 2021/04/24
【摘要】 前言: 普通图片: 给网页添加背景图片 html+css 动态: 就是换成MP4格式作为网页背景。 实现: 定义html的video标签: <video src="xiamu.mp4" class="bjimg" autoplay loop muted></video> 1 在url里写入自己视频地址就好~ 添加css样式就完成了: .bjimg ...

前言:

普通图片:
给网页添加背景图片 html+css
动态:
就是换成MP4格式作为网页背景。

实现:

  1. 定义html的video标签:
 <video src="xiamu.mp4" class="bjimg" autoplay loop muted></video>

  
 
  • 1

在url里写入自己视频地址就好~

  1. 添加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; 保持原有尺寸比例。但部分内容可能被剪切。

  1. 效果:
    夏目

总结:1

文章来源: blog.csdn.net,作者:北极光之夜。,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/luo1831251387/article/details/112971653

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。