视频作为背景在html中

时间:2016-03-26 10:55:21

标签: html css

我的代码问题我已经提到了这个问题 - 溢出:隐藏在css中但我的视频仍未显示在文本下方。我在我的css中提到了以下内容:

fullscreen-bg {
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
               overflow:hidden;
               `enter code here`z-index: -100;
}

.fullscreen-bg__video {
                       position: absolute;
                       top: 0;
                       left: 0;
                       width: 100%;
                       height: 100%;
}

1 个答案:

答案 0 :(得分:0)

这不是我写的,但它应该让你大致了解如何做到这一点,

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
   opacity: .5;
}

源:

https://codepen.io/dudleystorey/pen/knqyK