1

Web サイトでカバー ページを使用するときに問題が発生します。ブラウザウィンドウ全体をカバーする画像で構成されるページであるカバーページは、すべてのブラウザで正しく読み込まれますが、下にスクロールしてから再度上にスクロールすると、画像が歪んでしまいます (Firefox を使用している場合のみ)。説明する最も簡単な方法は、Web サイトhttp://arkad.tlth.seを表示することです。背景画像の CSS は次のとおりです。

.site-wrapper-inner {
 display: table-cell;
 vertical-align: top;
 background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

コードに関する詳細情報が必要な場合は、要素を調べてください。代わりにこれを使用してみましたが、スクロール効果がなくなりました。背景画像が他のコンテンツによってスクロールされる効果。画面全体が真っ白になる2つを組み合わせてみました。足りないものはありますか？

background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100% / cover transparent;
4

2 に答える 2

1

Firefoxで問題が発生することを確認できました。背景画像は Chrome で正しく表示されます。

display: table-cellに変更すると、Firefox の問題はなくなりますdisplay: block。

Firefox のテーブル セルの高さ計算エンジンが問題を引き起こしていると思われます。

table-cell 以外の表示モードを試してみます。

必要なものに近いandを使用display: tableしてみました。試行錯誤が必要な場合があります。height: 100%width: 100%

以下に示すように問題を再現できました（表のセルは描画の問題を示しています）。

html, body {
  margin: 0;
}
div {
 background: url(http://placekitten.com/2000/2000) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 width: 100%;
 height: 400px;
}
div.bg-cell {
  border: 2px dashed red;
  display: table-cell;
  height: 400px;
  width: 1000px; /* the width is for demo only... */
}
div.bg-block {
  border: 2px dashed blue;
  display: table; /* block also works... */
}
<div class="bg-cell"></div>
<div class="bg-block"></div>

于 2014-09-25T15:19:53.773 に答える
0

これを試して：

.site-wrapper {
 display: block;
 vertical-align: top;
 background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

「.site-wrapper-inner」ルールを削除します。

于 2014-09-25T15:23:28.390 に答える