屏幕滚动-背景固定
/* 父容器自身滚动 */
.bac {
height: 100%;
background: url(./imgs/main-bg.jpg) center top no-repeat;
background-size: 100% auto;
/* 背景不动【只支持ios】*/
background-attachment: fixed;
/* 滚动流畅 */
-webkit-overflow-scrolling: touch;
}
/* 父容器自身滚动 */
/* 背景渐变层 */
.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;
}
/* 滚动内容 */
.main-wrap {
box-sizing: border-box;
position: relative;
/* width: 100%;
min-height: 100vh; */
}
}
}
/* 父容器不滚动 */
.bac {
min-height: 100vh;
height: 100%;
background: url(./imgs/main-bg.jpg) center top no-repeat;
background-size: 100% auto;
/* 滚动子元素 */
.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;/* 必须写上 */
}
}
