Блог

Может кто-нибудь сказать мне, как я могу наложить фоновое видео без переложения каких-либо других компонентов?

Итак, я хочу, чтобы компоненты были видны и находились поверх всего остального, а затем фоновое видео было полностью на заднем плане, а затем текстура сверху и все поверх текстуры.

Примечание: я использую платформу Bulma на 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>
  

Изображение для примера:

Для достижения этого вам следует выполнить некоторую дополнительную работу с 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, то все в порядке, но не забудьте также добавить к ним некоторый стиль :).

Надеюсь, это поможет вам!