2018年8月9日 星期四

手機版網頁css bakcground fixed無法作用的問題

要在body設定background的背景圖為fixed
但是在手機版(ios)觀看會沒有作用,背景圖還是會跑

網路上搜尋到效果比較好的解決方式如下,做一下紀錄:
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../images/starBack.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-bottom: 20%;
}
請注意z-index值為-10。
html根元素默認z-index為0.
此值必須是最小z-index才能將其為背景。

沒有留言: