Question

有人可以告诉我如何在背景视频上叠加而不覆盖其他任何元素吗？

因此，我想使组件可见并位于其他所有内容的顶部，然后让背景视频一直位于背景中，然后纹理位于顶部，一切都位于纹理顶部。

注意：我正在WordPress上使用Bulma框架。

除了为纹理类定义以下内容外，我还在使用所有本机布尔玛类：

.hero .texture {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:15;
  background:url('/wp-content/themes/bulmapress/src/images/texture.png');
}

这是代码结构：

<div class="hero-head">
    <div class="first_nav">
        <header id="header" class="nav-down">
            <nav id="site-navigation" class="navbar container" role="navigation">
                <div class="navbar-brand">
                    <?php bulmapress_home_link('navbar-item'); ?>
                    <?php bulmapress_blog_description('navbar-item is-muted'); ?>
                    <?php bulmapress_menu_toggle(); ?>
                </div>
                <div class="navbar-menu">
                    <div class="navbar-start"></div>
                    <?php bulmapress_navigation(); ?>
                </div>
            </nav>
        </header>
    </div>
</div>
<section class="hero main_hero is-fullheight video">

    <div class="texture"></div>

    <div class="hero-video">
        <video poster="" id="bgvid" playsinline autoplay muted loop preload="auto">
            <source src="/wp-content/themes/bulmapress/src/images/compressed.mp4" type="video/mp4">
        </video>
    </div>

    <div class="hero-body">
        <div class="container has-text-centered">
            <div class="slider-content animated zoomIn pb-6">
                <div>
                    <p class="title is-1 main-text">Semirsmajlovic.com</p>
                    <p class="subtitle is-4 main-text">Website is under construction :)</p>
                </div>
            </div>
            <span class="scroll-down animated zoomIn">
        <svg
            width="30px"
            height="100%"
            viewBox="0 0 247 390"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            style="
            fill-rule: evenodd;
            clip-rule: evenodd;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 1.5;
          "
        >
          <path id="wheel" d="M123.359,79.775l0,72.843" style="fill: none; stroke: #fff; stroke-width: 20px;" />
          <path
              id="mouse"
              d="M236.717,123.359c0,-62.565 -50.794,-113.359 -113.358,-113.359c-62.565,0 -113.359,50.794 -113.359,113.359l0,143.237c0,62.565 50.794,113.359 113.359,113.359c62.564,0 113.358,-50.794 113.358,-113.359l0,-143.237Z"
              style="fill: none; stroke: #fff; stroke-width: 20px;"
          />
        </svg>
      </span>
        </div>
    </div>
</section>

图片例如：

Answer 1

要实现这一点，您应该做一些额外的CSS工作。

.hero.video {
  position: relative;
}

.hero.video .texture {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  color: white;
}

.hero.video .hero-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.hero.video .hero-video video {
  width: 100%;
  height: 100%;
}
.hero.video .hero-body {
position: absolute;
}

如果您想在div纹理中添加一些元素，那很好，但是请确保也为它们添加一些样式：）。

希望这能帮到您！

布尔玛视频背景纹理覆盖

1 个答案: