Question

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

* { 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>

Answer 1

<header>需要position: relative和background: none
<video>和<img>需要position: absolute和display: block
<img>需要background: none和z-index:（比<video> z-index大至少1）。
如果您认为确实需要.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>

HTML：视频背景块徽标

1 个答案: