[英]CSS background positioning different in safari and firefox
我设计了一个由4个部分组成的网站首页。 顶部,中间1,中间2和底部。 每个部分的最小高度均为网络浏览器的100%。 顶部具有透明背景色和图像/视频背景。
当用户向下滚动时,#video节应留在每个节的后面,而在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%;
}
首先,最好将视频放到最后,这样可以改善页面的加载。
为了使视频保持在其余位置,请使用z-index: -1;
在#videosection
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.