0

divWeb サイトの背景として使用したいと考えています。

幅とサイズを使用position:fixedしてビューポート サイズに設定すると、固定位置がサポートされていないため、モバイル デバイス/タブレットでデザインが壊れます。

モバイル デバイスでも機能するように、div を静的な背景として設定する最良の方法は何ですか?

4

2 に答える 2

1

背景をどのように使用するつもりなのか完全にはわかりませんが、ここでこれを行うためのゆるい方法を作成しました。粘着性のある背景は画面サイズの div に適用され、移動しません (その中に入れるものに注意している限り)。ただし、ボディに直接スタイルを適用するだけで同じ効果を得ることができます.divが必要な理由が正確にわからないため、この手法がユースケースで機能することを保証できません.

使い方

免責事項が邪魔にならないように、ここでそれがどのように機能するかについていくつかの詳細を示します. すべてのコンテンツは 2 つの div 内に表示する必要があります。1 つは背景を持つ外側の div で、すべてのコンテンツを保持する内側の div です。外側のものはページのサイズに設定され、背景を適用できます。内側のものは親のサイズに設定され、すべてのオーバーフローはスクロールに設定されます。外側のタグにはスクロールバーがないため、背景タグのサイズを超える内部コンテンツがあると、ページの一部だけでなく、ページ全体にスクロールバーが表示されます。実際には、これにより、「コンテンツ」div 内の平均的な Web ページの本文が再作成されます。

スタイルについて具体的な質問がある場合はお知らせください。仕組みを詳しく説明します.

jQueryで

まだ 1 つのオプションが残っていると思います: 同様のスタイル ルールを使用しますが、バックグラウンド内にすべてをネストする機能がなく、代わりに先頭に追加し、ユーザーがスクロールするたびにその位置を変更します。

次に、次のコードを挿入します。

<style>
#bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
</style>

<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
  $("#bg").css("top", $(document).scrollTop())
          .css("left", $(document).scrollLeft());
});
</script>

それに応じて背景 div のスタイル ルールを変更すると、うまくいくはずです。これは常にスクロール ペイントの後に表示されるため、フレームレートは良くありませんが、残りのドキュメント構造とスタイルをほとんど制御できない場合は、オプションが不足しています。

于 2013-02-13T23:02:35.980 に答える
0

jquery を使用する必要はありません。CSSだけでこの効果を得ることができました。

最初のタグのすぐ下に div を設定します。次に、画像を div 内の html に適用します。div および id 属性も指定します (この場合は #background_wrap)。

...HTML内の実際の画像リンクを適用せずにこれを試しましたが、css内の背景に画像を適用するときに「background-image:」属性を使用する必要があるため、正しく機能しませんでした。これをモバイル デバイスで動作させる秘訣は、背景画像の設定を使用しないことです。これらの値は私のプロジェクトに固有のものでしたが、固定された背景画像が中央に配置され、モバイルやより大きなコンピューターのビューポートに対して応答性を維持するために完全に機能しました. 特定のプロジェクトの値を少し調整する必要があるかもしれませんが、試してみる価値があります! これが役立つことを願っています。

 <body>
     <div id="background_wrap"><img src="~/images/yourimage.png"/></div>
 </body>

次に、これらの設定を CSS に適用します。

#background_wrap {
margin-left: auto;
margin-right: auto;   
}
#background_wrap img {
    z-index: -1;
    position: fixed;
    padding-top: 4.7em;
    padding-left: 10%; 
    width: 90%;
}
于 2017-04-12T04:28:06.907 に答える