前端使用視頻作為背景圖的方法

實現思路

通過 video + source 引入視頻,并對視頻播放屬性進行設置,再通過 css 使視頻覆蓋背景即可。

代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有開發問題可聯系作者</title>
</head>
<body><div class="login"><!--autoplay: 視頻在就緒后馬上播放loop: 循環播放muted: 靜音播放source標簽type屬性支持的類型有: video/ogg,video/mp4,video/webm--><video class="video-background" autoplay="autoplay" loop="loop" muted="muted"><source src="../images/orange_animate.mp4" type="video/mp4" /></video></div>   
</body>
<style>.login{width: 100%;height: 100%;display:flex;align-items: center;
}.video-background {position: fixed;top: 0;left: 0;min-width: 100%;height: 100%;width: auto;object-fit: cover;}</style>
</html>

👇覺得有幫助的朋友可以支持下作者哦,您的鼓勵是我創作的最大動力,如有開發問題可聯系作者
請添加圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/209823.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/209823.shtml
英文地址,請注明出處:http://en.pswp.cn/news/209823.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

學習git后,真正在項目中如何使用?

文章目錄 前言下載和安裝Git克隆遠程倉庫PyCharm鏈接本地Git創建分支修改項目工程并提交到本地倉庫推送到遠程倉庫小結 前言 網上學習git的教程&#xff0c;甚至還有很多可視化很好的git教程&#xff0c;入門git也不是什么難事。但我發現&#xff0c;當我真的要從網上克隆一個…

ubuntu18.04安裝pcl1.11.1

一、安裝pcl1.11.1依賴 sudo apt-get update sudo apt-get install git build-essential linux-libc-dev sudo apt-get install cmake cmake-gui sudo apt-get install libusb-1.0-0-dev libusb-dev libudev-dev sudo apt-get install mpi-default-dev openmpi-bin openmpi-…

SQL事務的開啟,提交和回滾

在處理數據庫數據的時候會出現一種情況就是我們刪除兩個關聯的表其中一個表的信息&#xff0c;另一個表也需要改動&#xff0c;但是我們SQL語句在同時更改兩個表的同時&#xff0c;難免會出現一個表修改成功&#xff0c;另一個出現錯誤&#xff0c;這時候表與表之間就會出現矛盾…

webrtc網之sip轉webrtc

OpenSIP是一個開源的SIP&#xff08;Session Initiation Protocol&#xff09;服務器&#xff0c;它提供了一個可擴展的基礎架構&#xff0c;用于建立、終止和管理VoIP&#xff08;Voice over IP&#xff09;通信會話。SIP是一種通信協議&#xff0c;用于建立、修改和終止多媒體…

geolife 筆記:將所有軌跡放入一個DataFrame

單條軌跡的處理&#xff1a;geolife筆記&#xff1a;整理處理單條軌跡-CSDN博客 1 加載數據 import pandas as pd import numpy as np import datetime as dt import osdata_dir Geolife Trajectories 1.3/Data/ 1.1 列出所有文件夾 dirlist os.listdir(data_dir) dirlist…

Esxi登錄超時:“由于不活動超時,您已被注銷“,修改UserVars.HostClientSessionTimeout為0永不超時

Esxi登錄超時:“由于不活動超時&#xff0c;您已被注銷”,修改UserVars.HostClientSessionTimeout為0永不超時 UserVars.HostClientSessionTimeout0永不超時 Esxi網頁登錄后,一段時間不操作就會被注銷 提示: 由于不活動超時&#xff0c;您已被注銷 主機→管理→系統→高級設…

【linux】查看CPU和內存信息

之前咱們一起學習了查看內存的和CPU的命令。 ?mpstat &#xff1a; 【linux】 mpstat 使用 uptime&#xff1a;【Linux】 uptime命令使用 CPU的使用率&#xff1a;【linux】查看CPU的使用率 nmon &#xff1a;【linux】nmon 工具使用 htop &#xff1a;【linux】htop 命令…

文件格式對齊、自定義快捷鍵、idea

文件格式對齊 Shift Alt F 自動格式化代碼的快捷鍵&#xff08;如何配置自動格式化&#xff09; 日常編碼必備idea快捷鍵 [VS Code] 入門-自定鍵盤快捷鍵 文件格式對齊 文件格式對齊通常是通過編輯器或IDE提供的快捷鍵或命令完成的。以下是一些常見編輯器和IDE中進行文件…

四、C#筆記

/// <summary> /// 第七章&#xff1a;創建并管理類和對象 /// </summary> namespace Chapter7 { class Program { public static int Num 0;//7.6.1創建共享字段 public const double PI 3.1415926;//7.6.2使用const關鍵字創建靜態字段…

快速認識什么是:Docker

Docker&#xff0c;一種可以將軟件打包到容器中并在任何環境中可靠運行的工具。但什么是容器以及為什么需要容器呢&#xff1f;今天就來一起學快速入門一下Docker吧&#xff01;希望本文對您有所幫助。 假設您使用 Cobol 構建了一個在某種奇怪風格的 Linux 上運行的應用程序。您…

Linux C語言 41-進程間通信IPC之共享內存

Linux C語言 41-進程間通信IPC之共享內存 本節關鍵字&#xff1a;C語言 進程間通信 共享內存 shared memory 相關庫函數&#xff1a;shmget、shmat、shmdt、shmctl 什么是共享內存&#xff1f; 共享內存&#xff08;Shared Memory&#xff09;指兩個或多個進程共享一個給定的…

InnoDB Architecture MySQL 5.7 vs 8.0

innodb-architecture-5-7 innodb-architecture-8-0 圖片均來源于MySQL官網

【Vue】props與$emit的簡單理解

Vue組件 組件是Vue中不可或缺的一個功能&#xff0c;它可以將一個頁面劃分為多個獨立的內部組件&#xff0c;方便代碼的管理。 定義組件 <body><div id"App"><bcomp></bcomp></div><script>const app Vue.createApp({})cons…

【2023傳智杯-新增場次】第六屆傳智杯程序設計挑戰賽AB組-ABC題復盤解題分析詳解【JavaPythonC++解題筆記】

本文僅為【2023傳智杯-第二場】第六屆傳智杯程序設計挑戰賽-題目解題分析詳解的解題個人筆記,個人解題分析記錄。 本文包含:第六屆傳智杯程序設計挑戰賽題目、解題思路分析、解題代碼、解題代碼詳解 文章目錄 一.前言二.賽題題目A題題目-B題題目-C題題目-二.賽題題解A題題解-…

Servlet should have a mapping

第一種可能&#xff1a; 你就是沒寫Servlet <servlet><servlet-name>SpringMVC</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!-- 配置springMVC需要加載的配置文件--><init-par…

Android studio生成二維碼

1.遇到的問題 需要生成一個二維碼&#xff0c;可以使用zxing第三方組件&#xff0c;增加依賴。 //生成二維碼 implementation com.google.zxing:core:3.4.1 2.代碼 展示頁面 <ImageViewandroid:id"id/qrCodeImageView"android:layout_width"150dp"an…

ubuntu 如何修改主機名稱

UBUNTU 2018.04 LTS 64位 修改當前電腦的主機名稱。 操作步驟如下&#xff1a; 假設你的主機名為AAAAA &#xff0c; 打算修改為BBBBB。開機進入桌面。 打開一個終端。命令行下&#xff0c;使用vi /etc/hostname指令&#xff0c;編輯主機名稱。將hostname文件里的AAAAA改為BB…

【Linux】echo命令使用

?echo命令 功能是在顯示器上顯示一段文字&#xff0c;一般起到一個提示的作用。此外&#xff0c;也可以直接在文件中寫入要寫的內容。也可以用于腳本編程時顯示某一個變量的值&#xff0c;或者直接輸出指定的字符串。 ? 著者 由布萊恩福克斯和切特拉米撰寫。 語法 echo […

Flum--環境搭建實驗

1.解壓flum安裝包 解壓到/opt/module下&#xff1a; tar -zxvf /opt/software/apache-flume-1.9.0-bin.tar.gz -C /opt/module/ 2.修改flum名字&#xff1a; mv /opt/module/apache-flume-1.9.0-bin /opt/module/flume 3.將lib文件夾下的guava-11.0.2.jar刪除以兼容Hadoop…

圖像萬物分割——Segment Anything算法解析與模型推理

一、概述 在視覺任務中&#xff0c;圖像分割任務是一個很廣泛的領域&#xff0c;應用于交互式分割&#xff0c;邊緣檢測&#xff0c;超像素化&#xff0c;感興趣目標生成&#xff0c;前景分割&#xff0c;語義分割&#xff0c;實例分割&#xff0c;泛視分割等。 交互式分割&am…