Question

我是CSS的新手，请耐心等待。我正在尝试为视频上的半透明文本框的部分设置视频背景。经过一段时间的努力，我终于将视频安装到了屏幕上，并在屏幕缩小时调整了大小。

问题是，当屏幕变窄时，包含文本的部分现在不会调整大小。而是，该文本在下一个div下消失。

我认为这是因为视频的宽高比无法修改。我能想到的最好的解决方案是设置媒体查询，以在屏幕宽度小于700像素时用静态背景替换视频。

我希望auto;”的常规属性能够插入并容纳文本的额外长度。但是，当放置在媒体查询中时，视频对“ display：none;”标签没有响应。

我对要做的事情有些困惑。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, `enter code 
here`initial-scale=1.0">
    <title>Jamaa</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body>

<ul class="navbar">
<li><p href="#home" style="margin-left: 20px;">JAMAA</p></li>
<li style="float:right"><a href="#news">Contact</a></li>
<li style="float:right"><a href="#contact">News</a></li>
<li style="float:right"><a class="left" href="#about">Blog</a></li>
</ul>

<section class="intro">  
<div class="content">
  <img src="images/jamaalogo.png"
       style="height:300px; margin-top: 5%; align-content: center; "
       class="center">
  <h1 class="motto">Share. Profit.</h1>
<h2 style="text-align: center;">Using finance to increase cryptocurrency 
access for those who need it most.</h2>
</div>
</section>

<div class="video_wrapper">
     <video preload="auto" autoplay="true" loop="loop" muted="muted" 
volume="0" poster="images/relief.jpg" style="height:auto; ">


     <source src="images/fountain.mp4" type="video/mp4">

    <div class="problem_box"><h2>We Have a Problem</h2><p>People are 
 losing their savings. Governments are collapsing. The threat of war is 
 looming on the horizon. All of these problems have a common source- bad 
 money. And yet most of us don't know what we can do about it.</p></div>


</video>

这是CSS：

@font-face {
font-family: 'textabold';
src: url('fonts/texta-bold-webfont.woff2') format('woff2'),
     url('fonts/texta-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" 
rel="stylesheet">



* {
 box-sizing: border-box; 
}

body {
margin: 0; 
font-weight: 500;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
}

h2 {
 font-size: 2em;
 display: block;
 color: white;
 font-weight: 300;
 }


h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}

p {
 font-size: 1 em;
 font-weight: 500;
 color: white;
}

a {
 font-weight: 700;
 color: #333;

 &:hover{ 
 opacity: 0.8;
}

 &:active {
 top: 1px;
}
}

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 }

li {
 float: left;
 }

 li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 }

 li a:hover:not(.active) {
   background-color: #111;
  }



  .container {
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    padding: 2px 44px;     
  }


.navbar {
  position: fix
  }

 @media screen and (max-width : 760px){
  ul {
     display: none;
   }

 .intro { background: red;}

 .video_wrapper {
    height:auto;
    background: url("images/relief.jpg") no-repeat center center;
    background-size: cover;

 }

 .video { 
      display: none;
 }
}


.title {
  display: block;
  color: white;
  align-items: center;
  padding: 12px 44px;
  font-size:;
 }

li a:hover {
  background-color: #4CAF50;
 }

.intro {
  height: 92vh;
  background-color: #4CAF50;
  display: block;
  overflow: hidden;
 }

 .problem {
   max-height: 60vh;
   background-size: cover;
   opacity: 0.8;
   z-index: -100;
 }

.problem_box {
  height:70%;
  z-index: 2;   
 }

.video_wrapper{
  width: auto;
  position: relative;
  overflow: hidden;
  z-index: -1;
  margin-bottom: -30px;
  text-align: center;
 }

.video_wrapper video{ 
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;   
  z-index: 1;
  height: auto;
  overflow: auto;
 }

.video_wrapper .problem_box {
   height: auto;
   width: 70%;
   position: absolute;
   z-index: 2;
   top: 0px;
   left: 0px;
   background: #333;
   opacity: 0.9;
   display: inline-block;
   margin-top: 8%;
   margin-left: 15%;
   box-sizing: content-box;
   }

我想我只能放弃并使用静态背景，但是花了我这么长时间才弄清视频背景，我现在不想把它扔掉……任何帮助都非常感谢！

Answer 1

您忘记将video类放在视频标签上

<video preload="auto" autoplay="true" loop="loop" muted="muted" 
volume="0" poster="images/relief.jpg" style="height:auto; " class="video">

屏幕缩小时CSS视频背景不会消失

1 个答案: