背景圖-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; 

問題解決