移動設備中的視差

Question

我正在建立一個使用視差背景的網站。 在Mac上的Safari和Chrome中，它可以正常工作，但背景尺寸：封面在移動設備上根本無法使用。 圖片被放大，並且視差功能被禁用。

我一直在尋找一個簡單的解決方案，但找不到任何地方。 只要背景圖片尺寸合適，我很樂意在移動設備上失去視差功能。

救命？ 附加基本代碼。

HTML：

<body>

<div id="bg01" class="bg01">
</div>

<div class="divwrapper">
<div class="div" id="div">
CONTENT
</div>
</div>

<div id="bg02" class="bg02">
</div>

</body>

CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    background-color: red;
}

.divwrapper {
    display: table;
    width: 80%;
    margin:auto; 
    font-size: 12px;
    line-height: 150%;
    text-align: center;
}

.div {
    height:300px;   
}

.bg01 { 
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/52/cc/af/52ccaf818ddc056e12e522b9395dd87d.jpg");
    height: 100%; 
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.bg02 { 
    background-image: url("http://blog.hostbaby.com/backgrounds/bg_lightwoodfloor.jpg");
    height: 100%; 
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

這是JSFiddle

編輯/更新

我嘗試了不同的媒體查詢，至少可以通過將其更改為較小的圖像來在div背景圖像上獲得正確的比例，但這根本不起作用（它仍然使用放大的大圖像）：

@media (max-width: 600px) {
        .bg01 { 
    background-image: url("../images/bg_small.jpg");
    background-size: 20% 20%;
    background-repeat: repeat;
    }
  }

我也嘗試過最小寬度和最大寬度。

Answer 1

我通常使用此處顯示的“封面清單”： https : //css-tricks.com/perfect-full-page-background-image/但如果您需要查看整個圖像，則不是很好的用法

嘗試基思·克拉克（Keith Clark）的解決方案：我使用移動工具進行了很好的嘗試。 只需將背景替換為圖像即可。 http://keithclark.co.uk/articles/pure-css-parallax-websites/

的HTML

<div class="parallax">

<div id="group1" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group2" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
</div>

<div id="group3" class="parallax__group">
  <div class="parallax__layer parallax__layer--fore">
    <div class="title">Foreground Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group4" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--deep">
    <div class="title">Deep Background Layer</div>
  </div>
</div>

<div id="group5" class="parallax__group">
  <div class="parallax__layer parallax__layer--fore">
    <div class="title">Foreground Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group6" class="parallax__group">
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group7" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

移動設備中的視差

問題描述

1 個解決方案

解決方案1
1 2016-10-26 16:09:26

移動設備中的視差

問題描述

1 個解決方案

解決方案1 1 2016-10-26 16:09:26

解決方案1
1 2016-10-26 16:09:26