css关于页面背景和主体分离的方法

 

html主体

　　

<!-------------- css关于页面背景和主题分离的方法 ----------------->
<html>
    <head>
            <title>css关于页面背景和主题分离的方法</title>
    </head>
    <body>
　　　　<div class="body_bg"> 　　
　　　　　　　　<div class="bglist"> 　　
　　　　　　　　　　<img class="bg" src="__STATIC__/activity/img/grocery_store/pc/bg1.png" alt="" /> 　　
　　　　　　　　　　<img class="bg" src="__STATIC__/activity/img/grocery_store/pc/bg2.png" alt="" /> 　　
　　　　　　　　</div>　　　　

　　　 </div>

　　　　<div style="height: 1000px;width: 200px">
　　　　　　代码主体
　　　　</div>　

　　</body> 
</html>

　　

　　

css样式

 

.body_bg {
    position: absolute;   // 背景定位，脱离文档流
    left: 0;　　　　　　　　//  
    top: 0;
    z-index: -1;　　　　　 // 作为背景置于最底层，不遮挡其他
    min-width: 1200px;　　// 设置最小宽度 低于出现滚动条，高于时两条同时折叠，保持背景始终居中
    width: 100%;　　　　　　
    height: 100%;
    overflow: hidden;    //超过页面主体文档高度的背景折叠隐藏
}
.body_bg .bglist {
     position: absolute; 
     width: 1920px;
     left: 50%;            //图片距离左边50%， 屏幕宽度不足1920px, 页面左右背景同时折叠
     margin-left: -960px;  // 重点代码 important
}
.body_bg .bglis  img {
      display: block;
       width: 100%;
 }

　　

 

另外最近发现了一个关于css吸附属性

  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 0;

　　适用于做移动端标签栏滑动到顶部后固定，原来是要使用js计算scrollTop的值，然后达到高度添加 positin: fixed 属性，但是真机测试时部分会有卡顿的情况

特性（坑）：
1.sticky不会触发BFC，
2.z-index无效，
3.当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
4.父元素不能有overflow:hidden或者overflow:auto属性。
5.父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一。
 
 使用 Can I use  查询，兼容也是一言难尽
 

 

 

 

posted on 2020-06-10 23:01  jswzy  阅读(400)  评论(0)    收藏  举报