背景图-background定位

html

 <nav  >    <img class="back" src="./imges/back.png" alt="">    <p class="nav_text" >     排行榜    </p>  </nav>

css

nav{  height: 4.4rem;  width: 100%;  background: url('../imges/bg1.png') no-repeat 100% ;  padding: 0.2rem 0.2rem;  display: flex;  justify-content: flex-start;  position: absolute;  top: 0;  left: 0;  z-index: -10;  flex: 1;  background-position: 0 0; }

效果

红色为背景图片

出现问题：

在自适应页面的缩放中出现问题

position属性无法作用于背景图片

所以在缩放页面的时候背景图的位置在改变

所以在nav 中设置背景图的定位属性 background-position: 0 0; 

问题解决