<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>video</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <style> *{ margin:0px; padding: 0px;} .video_class{position: relative;width: 100%;height: 100%; } video{width: 100%;height: 100%;object-fit: cover;object-position: 100% 100%;display: inline-block } .bg_class{background: rgba(0,0,0,.6);width:100%;height: 100vh;position: absolute;top: 0px;left: 0px} .text_class{ position:absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);text-align: center} .btn_class{background-color: #43bc71;border:1px solid #2b9152;transition: background-color .5s ease <
使用视频作为背景,全屏展示
最新推荐文章于 2024-04-24 09:27:42 发布