Question

在我的网站上我想用视频替换背景图像（封面），如果它已加载。此外，我想使用flex，视频应该像图像，这意味着它做100vh。我的目的是用pug / jade和sass编写网站（如果你看一下代码）。

如果我将其设置为100vh，视频位置从左下角开始，而图像位置从左上角开始。

如果我将高度设置为100％而不是100vh，但是，如果我缩放窗口，背景图像有时会更大，你会在底部看到它。

任何想法如何解决这个问题？（是的，最后的js脚本不起作用 - idk为什么）

这是网站：http://heinz.mutsu.tv/final/

感谢您的帮助！

html（帕格/玉）：

doctype html
html
head
    meta(charset="utf-8")
    title Heinz H&ouml;pfner - Facereader
    meta(name="viewport" content="width=device-width,initial-scale=1")
    link(rel="stylesheet" href="css/reset.css")
    link(rel="stylesheet" href="css/styles.css")
    link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,700")
    script(src='js/jquery.js' type='text/javascript')

body
    header.large
        nav
            img(src="img/navlogo.png" alt="navlogo")
            ul
                li: a(href="#") About
                li: a(href="#") Facereading
                li: a(href="#") Seminare
                li: a(href="#") Referenzen

    .vidbg      
        video(autoplay loop)
            source(src="img/ani/bg.webm" type="video/webm")
            source(src="img/ani/bg.mp4" type="video/mp4")

    .welcome
        img(src="img/logo.png" alt="logo")

    script(type='text/javascript').
        $(document).on("scroll",funtion(){
            if($(document).scrollTop()>200){
                $("header").removeClass("large").addClass("small");
            } else{
                $("header").removeClass("small").addClass("large");
            }
        });

css（sass）：

html, body
margin: 0

header
  background: rgba(255,255,255,0)
  width: 100%
  position: fixed
  z-index: 999
  .large
    font-size: 24px
  nav
    width: 960px
    margin: 0 auto
    height: 80px
    display: flex
    justify-content: flex-end
    align-items: center
      img
        height: 35px
        margin-top: 10px
        margin-bottom: 10px
        display: none
      ul
        display: flex
  a
    color: rgba(255,255,255,0.8)
    text-decoration: none
    font-family: Lato
    text-transform: uppercase
    font-size: 24px
    font-weight: 100
  a.active, a:hover
    color: #ffcc00
  li
    margin-right: 30px
  .large
    height: 250px
    img
      margin-top: 80px
      height: 180px
      margin-left: 218px
    li
      display: none
    .logotitle
      font-size: 52px
      padding-top: 124px
      font-family: Lato
      position: fixed
      padding-left: 16px
  .small
    height: 200px
    background: rgba(0,0,0,0.9)
    border-bottom: 1px solid #000
    img
      height: 40px
      margin-top: 5px
    li
      margin-top: 17px
header,nav, a, img, li
  transition: all 1s

.vidbg
  position: absolute
  width: 100%
  height: 100vh
  overflow: hidden
  video
    object-fit: cover
    width: 100%
    height: 100vh

.welcome
  height: 100vh
  background-image: url(../img/bg.png)
  background-size: cover
  margin-bottom: 50px

  display: flex
  flex-direction: column
  align-items: flex-end
  justify-content: space-around

  img
    height: 125px
    margin-right: 7%
    z-index: 100

p
  width: 600px
  margin: 0 auto 20px
  font-family: Lato

Answer 1

如果您无法通过css修复它，请尝试使用jQuery。

http://codepen.io/jeremychurch/pen/qaIbK

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.sidebar').css('min-height', windowHeight);
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

视频从左上角css发布

1 个答案: