屏幕滾動(dòng)-背景固定
/* 父容器自身滾動(dòng) */
.bac {
height: 100%;
background: url(./imgs/main-bg.jpg) center top no-repeat;
background-size: 100% auto;
/* 背景不動(dòng)【只支持ios】*/
background-attachment: fixed;
/* 滾動(dòng)流暢 */
-webkit-overflow-scrolling: touch;
}
/* 父容器自身滾動(dòng) */
/* 背景漸變層 */
.bg-color {
box-sizing: border-box;
background-image: linear-gradient(90deg, #FB2F58 0%, #FB684E 100%);
z-index: -1;
width: 100%;
min-height: 100vh;
/* 定位漸變層之上的背景層 */
&:before {
content: '';
position: fixed;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(./imgs/main-bg-long.jpg) center top no-repeat;
background-size: 100% auto;
background-attachment: fixed;
}
/* 滾動(dòng)內(nèi)容 */
.main-wrap {
box-sizing: border-box;
position: relative;
/* width: 100%;
min-height: 100vh; */
}
}
}
/* 父容器不滾動(dòng) */
.bac {
min-height: 100vh;
height: 100%;
background: url(./imgs/main-bg.jpg) center top no-repeat;
background-size: 100% auto;
/* 滾動(dòng)子元素 */
.main {
box-sizing: border-box;
display: -webkit-flex; /* Safari */
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
min-width: 100%;
max-height: 100vh;
padding: 0 40px;
overflow: auto;/* 必須寫(xiě)上 */
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
