时间戳

首页 > 解决方案 > HTML：视频背景块徽标

html - HTML：视频背景块徽标

问题描述

我正在创建一个网站，并为网站背景设置了一个视频。现在的问题是，当我尝试在网站顶部插入徽标时，视频会阻止图像。 我的 CSS 图像 我的网站的当前视图

* { margin: 0; padding: 0; } .video-background{ position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width : auto; height: auto; z-index: -100; } media (min-aspect-ratio: 16/9){ .video-background{ width: 100%; height: auto; } } media (max-aspect-ratio: 16/9){ .video-background{ width: auto; height: 100%; } } .navigation{ margin: 10px 50px; height: 60px; } 
<!DOCTYPE html>

<html>

<head>
<title>CSC1026: Tutorial Website</title>

<link href="CSS/style.css" rel="stylesheet" type="text/css">

</head>

<body>

	<header>
	
		<video autoplay loop class="video-background" muted plays-inline>
		<source src="Workaholic.mp4" type="video/mp4">
		</video>
		
		
	<div class= "navigation">
		<img src= "logo.png" class = "logo">
	</div>
		
	</header>

</body>

</html>

标签： htmlcss

解决方案

  1. <header>需求position: relative和background: none
  2. <video>并且<img>需要position: absolute和display: block
  3. <img>需要background: none和z-index:（至少大于 1，<video> z-index如果有的话）。
  4. 如果你认为你真的需要.navigation（你可能不需要）——添加相同的属性<img>并进行相应的调整。

main {
  position: relative;
  top: 30vh;
  left: 0;
  width: 99vw;
  height: auto;
}

header {
  position: relative;
  background: none;
  width: 99vw;
  height: auto;
}

img {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 15vw;
  height: 30vh;
  background: none;
}

video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}
<header>
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png">
</header>
<main>
  <video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005610.mp4' muted plays-inline autoplay loop></video>
</main>

推荐阅读