Question

我设计了一个由4个部分组成的网站主页。顶部，中部1，中部2和底部。每个部分的最小高度为Web浏览器的100％。顶部具有透明背景颜色和图像/视频背景。

当用户向下滚动时，＃videosection应该留在每个部分后面，而不是在Safari中，它不会将视频部分保留在其他部分后面，而firefox不会显示视频部分。使用铬一切都很好。

HTML：

<body>
 <div id="videosection"><video src=""id="bg-video" muted autoplay loop ></video></div>
  <div class="top-section">
  </div> 
  <div class="mid1-section">
        <div id="center-box">
          <section></section>  
        </div> 
  <div class="mid2-section">
    <div class="textbanner"><h3>Design</h3></div>
    <div class="devices box"><img src=""></div>
  </div>
  <div class="bottom-section">
     <div id="registerform"></div>
  </div>
</body>

继承人的CSS：

  html, body{
  background-color: #ECF0F1;
  min-height:100%;
  margin: 0;
  padding: 0;
  }

    #videosection {
    position: fixed; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%
    z-index: 1;
    }

    videosection video {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 60%; 
    min-height: 50%; }

    .top-section{

    background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82) ); /* For Safari / background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / For Opera 11.1 to 12.0 / background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / For Firefox 3.6 to 15 / background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / Standard syntax */ background-repeat: repeat; 
    position: relative;
    top: 0; 
    left: 0;
    min-width: 100%;
    min-height: 100%; 
    z-index: 15;}


#center-column {
position: relative;
margin: 0;
margin-top: 10%;
margin-bottom: 5em;
padding: 0;
}

.mid1-section{
  min-height:100%;
  width: 100%;
  background-color: #ff5b68;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
    z-index: 15;}

#center-box { 
    overflow: hidden;
    float: none;
    text-align: center;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;}

.mid2-section{
  min-height:100%;
  width: 100%;
  background-color: #3499dc;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
    z-index: 15;}

 .textbanner { 
     overflow: hidden;
     float: none;
     height: 20%;
     width: 100%;
     margin: 0;
     padding-top: 3em;
 }

section { 
    overflow: hidden;
    text-align: center;
    margin: 0;
    float: left;
    background-color: #ff5b68;
    height: 10.5em;
    width: 40%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5em;
    padding-bottom: 0;
}

.bottom-section{
  min-height:100%;
  width: 100%;
  background-color: #1ABC9C;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
    z-index: 15;}

#registerform { 
    background-color: #16A085;
    border: 1px solid #16A085;
    border-radius: 5px;
    width: 420px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 5%;
}

Answer 1

首先，最好将视频放在最后，这将改善页面的加载。

要使视频留在其余部分，请使用z-index: -1;中的#videosection。

CSS背景定位在safari和firefox中不同

1 个答案: