Question

对于我正在工作的网站，我有一个视频作为登录页面，该页面占据了整个页面，而下面是照片，我的问题是，当我将视口更改为较小的宽度时，图像会重叠视频挡住了视频的观看范围。

HTML代码

<header>
    <h1><a href="#cover">Head</a></h1>
    <div>
        <nav>
            <ul>
                <li><a href="#about_us">ABOUT US</a></li>
                <li><a href="#team">OUR TEAM</a></li>
                <li><a href="#sponsors">OUR SPONSERS</a></li>
                <li><a href="#contact">CONTACT US</a></li>
            </ul>
        </nav> 
    </div>
</header>
<div id = "cover">
    <video autoplay="true" muted loop>
        <source src="Images/5032play.mp4" type="video/mp4" >
    </video>
    <div class="coverText">
      <div id="topText">
        <span><h1>Welcome</h1></span><br>
        <span><h1>to</h1></span><br>
      </div>  
        <span><h1>The website</h1></span><br>
        <span><h1>lorem</h1></span>
    </div>
</div>
<section id="about_us">

    <div class="Intro">
        <img src="Images/TeamPhoto.jpg" alt="TeamPhoto">
        <div class="content">
            <h1>About Us</h1>
            <p>Content</p>
        </div> 
    </div> 
</section>

CSS

div#cover {
  clear: both;
  margin-top: 50%; }

div#cover video {
  overflow-y: hidden;
  z-index: -1;
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%; }

div.coverText {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -270px;
  font-size: 30px; }

div#topText {
  font-size: 10px; }

div.coverText h1 {
  font-weight: 100;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: white;
  padding: 10px 0 10px 15px;
  text-align: center; }

section#about_us {
  padding: 25px 0; }

div.Intro {
  margin: 40px auto;
  text-align: center; }

div.Intro div.content {
  max-width: 980px;
  margin: 0 auto; }

div.Intro h1 {
  text-align: center;
  font-size: 40px; }

div.Intro p {
  max-width: 980px;
  text-align: center;
  line-height: 25px;
  margin: 40px 0; }

有什么办法可以阻止这种情况吗？谢谢！

Answer 1

您尝试过max-width: 100%吗？ https://codepen.io/Liveindream/pen/VwYXXyE

当浏览器更改大小时，防止图像重叠

1 个答案: