CSS技巧系列 |
您所在的位置：网站首页 › 如何将作为网页的背景模板设置 › CSS技巧系列 |
CSS技巧系列
|
视频背景
有一些官方网站为了弘扬他们的企业文化，往往会拍一些记录短片。如果能把这些记录短片放在公司的官方网站上，既能体现公司的企业文化又能给网站提供更加绚丽的视觉享受 预览效果接下来请看下我制作的一个demo： 预览效果：视频全屏背景案例 下载源码：http://chengqige.com/bg/video/index.rar 大家可以下载源码进行阅读，关键的部分我都做了详细的注释 核心代码展示css部分 * { margin: 0; padding: 0; } .video-box { position: relative; height: 100vh; background-color: #C1CFF7; /*进行视频裁剪*/ overflow: hidden; } .video-box .video-background { position: absolute; left: 50%; top: 50%; /*保证视频内容始终居中*/ transform: translate(-50%, -50%); width: 100%; height: 100%; /*保证视频充满屏幕*/ object-fit: cover; min-height: 800px; }html部分： 上述css+html代码可以完美的运行出效果，关于object-fill属性大家可以百度一下可以学到不同的属性值 核心模块解读关键点1：如何使视频铺满屏幕 其实使得视频铺满屏幕，原则上来讲是不可能实现的任务。因为video组件我们不能像图片一样对视频进行拉伸，所以直接设置宽高是行不通的。 小实验：（验证直接设置宽高对video无效） 实验效果：正方形 
原因：视频流不可扭曲拉伸，若同时对视频设置宽高以宽度为基准 其实这个问题在css2.0之前只能依靠js去解决，但是现在css3有新的属性值:object-fill:cover 这个属性值能够让我们的视频充满屏幕，并且不变形 实验代码： * { margin: 0; padding: 0; } video { width: 100%; height: 100vh; object-fit:cover; } div{ background:red; height:100vh }显示效果： 我们发现有一条白色的细缝，这个细缝导致拥有垂直滚动条 解决方案： 对video标签设置display:block 如果有溢出的问题，我们可以使用overflow-hidden就可以解决问题 关键点2：如何使视频适配手机 接下来展示不同设备我的适配效果： 大屏幕：
那么如何实现适配呢？ 玄机在这里 .video-box .video-background { position: absolute; left: 50%; top: 50%; /*保证视频内容始终居中*/ transform: translate(-50%, -50%); width:100%; height: 100vh; object-fill:cover; min-height: 800px; }我们保证视频是居中的，也就是说屏幕再小我们只显示居中的部分，两边裁剪掉 以上就是所有技术关键之处 |
细缝完美解决！
平板电脑： 
手机： 
【本文地址】
今日新闻 |
推荐新闻 |