移动端背景视频消失问题求助（基于Bulma框架）

我明白你遇到的困扰——背景视频在特定分辨率下消失，想换成图片又怕太突兀。下面我给你一套完整的解决方案，既能实现响应式切换，又能让过渡效果自然流畅：

核心思路 #

1. 把视频和备用图片放在同一个父容器中，默认只显示视频
2. 通过CSS媒体查询在目标断点切换显示状态
3. 给容器和元素添加过渡动画，让切换过程平滑不生硬

修改后的完整代码 #

HTML部分 #

<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css"> 
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script> 
  <!-- <link rel="stylesheet" href="styles/debug.css"> --> 
  <link rel="stylesheet" href="styles/helpers.css"> 
  <link rel="stylesheet" href="styles/grid.css"> 
  <style>
    /* 自定义样式部分 */
    .hero-video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .hero-video-container video,
    .hero-video-container .bg-fallback-img {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      object-fit: cover;
      transition: opacity 0.5s ease-in-out;
    }

    .hero-video-container .bg-fallback-img {
      display: none;
      opacity: 0;
    }

    /* 这里设置你需要切换的分辨率，比如768px，可根据实际情况调整 */
    @media screen and (max-width: 768px) {
      .hero-video-container video {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
      }

      .hero-video-container .bg-fallback-img {
        display: block;
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <section class="hero is-fullheight"> 
    <div class="hero-head "> 
      <header class="navbar"> 
        <div class="container"> 
          <div class="navbar-brand"> 
            <a class="navbar-item "> 
              <img src="images/nike-128.png" alt="Nike Logo"> 
            </a> 
            <span class="navbar-burger burger" data-target="navbarMenuHeroC"> 
              <span></span> 
              <span></span> 
              <span></span> 
            </span> 
          </div> 
          <div id="navbarMenuHeroC" class="navbar-menu"> 
            <div class="navbar-end"> 
              <a class="navbar-item is-active"> Home </a> 
              <a class="navbar-item"> Examples </a> 
              <a class="navbar-item"> Documentation </a> 
              <span class="navbar-item"> 
                <a class="button is-dark is-inverted"> 
                  <span class="icon"> 
                    <i class="fa fa-shopping-bag"></i> 
                  </span> 
                  <span>Shop</span> 
                </a> 
              </span> 
            </div> 
          </div> 
        </div> 
      </header> 
    </div> 

    <!-- 修改后的视频/图片容器 -->
    <section class="hero video is-mobile"> 
      <div class="hero-video hero-video-container"> 
        <video id="bgvid" playsinline autoplay muted loop> 
          <source src="https://nikevideo.nike.com/72451143001/201805/2841/72451143001_5783869838001_5783870581001.mp4" type="video/mp4"> 
        </video>
        <!-- 备用背景图片，替换成你自己的图片地址 -->
        <img class="bg-fallback-img" src="https://example.com/your-fallback-image.jpg" alt="VaporMax fallback background">
      </div> 

      <section class="hero"> 
        <div class="hero-body"> 
          <div class="container has-text-right"> 
            <h1 class="title"> The new VaporMax </h1> 
            <h2 class="subtitle"> Lorem </h2> 
          </div> 
        </div> 
      </section> 
    </section> 

    <!-- Hero footer: will stick at the bottom --> 
    <div class="hero-foot"> 
      <nav class="tabs is-boxed is-fullwidth"> 
        <div class="container"> 
          <ul> 
            <li class="is-active"><a>Overview</a></li> 
            <li><a>Modifiers</a></li> 
            <li><a>Grid</a></li> 
            <li><a>Elements</a></li> 
            <li><a>Components</a></li> 
            <li><a>Layout</a></li> 
          </ul> 
        </div> 
      </nav> 
    </div> 
  </section>
</body>
</html>

关键细节说明 #

• 容器结构优化：把视频和图片放在同一个hero-video-container里，确保两者的定位和尺寸完全一致，避免切换时出现布局跳动
• 过渡动画：给元素添加opacity和visibility的过渡效果，视频会逐渐淡出，图片逐渐淡入，完全没有突兀感
• 媒体查询断点：你可以根据实际需求修改max-width: 768px这个值，匹配视频消失的那个分辨率
• 图片适配：使用object-fit: cover保证图片和视频一样，能够铺满容器同时保持比例不变

这样修改后，当页面缩小到目标分辨率时，视频会平滑过渡到图片，用户体验会好很多。

内容的提问来源于stack exchange，提问作者Igu