2

私はcss3を使用して、素晴らしいフルスクリーンの背景画像を取得しています。

body{ 
  background: url(<?php echo $background_image; ?>) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

もちろん、IE8以前はボールをプレーせず、ひどく見えます。IE8で動作させる簡単な方法はありますか？

私はjQueryAnyStretchを調べました。これは、次を使用して呼び出されます。

<script type="text/javascript">
  $.anystretch(<?php echo $background_image; ?>, {speed: 150});
</script>

しかし、それは機能しますが、私はそれを作ることができなかったので、IE8ブラウザーにのみロードされました。anystretchを使用すると、ブラウザは画像を2回ロードします（1回はcssで、もう1回はanystretchで作成されたhtml用）。

誰かがこれを行う簡単な方法について何かアイデアがありますか？

4

5 に答える 5

2

このサイトをチェックアウトしましたかCSSTricksPerfect Full PageBackgroundImage。などのCSS3プロパティをサポートしていないブラウザのフォールバックとして使用するさまざまな手法について説明しますbackground-size。CSSのみのメソッドとjQuery支援メソッドの両方があります。

CSS Only Technique＃2はIE8+フォールバックをカバーしています

于 2013-03-05T18:57:01.620 に答える
0

いいえ、「単純な」方法はありません。ほとんどの場合、repeat-xを使用したグラデーション画像など、古いブラウザの代替背景を選択するだけです。

于 2013-03-05T18:41:06.667 に答える
0

しかし、それは機能しますが、私はそれを作ることができなかったので、IE8ブラウザーにのみロードされました。

これは、IE8ブラウザーでのみロードされます。

<!--[if IE 8]>
<script type="text/javascript">
  $.anystretch(<?php echo $background_image; ?>, {speed: 150});
</script>
<![endif]-->

または、IE8以下にロードする場合：

<!--[if lt IE 9]>
<script type="text/javascript">
  $.anystretch(<?php echo $background_image; ?>, {speed: 150});
</script>
<![endif]-->

http://www.quirksmode.org/css/condcom.html

于 2013-03-05T18:43:23.627 に答える
0

あなたはこれを行うことができます。

background:url("image.png")no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png",sizingMethod=scale);
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png",sizingMethod=scale);
于 2013-03-05T18:51:08.637 に答える
0

それはあなたがどれだけハッキーになりたいかによります。cssをメディアクエリに配置して、IE8以前では読み込まれないようにすることができます（メディアクエリをサポートしていないため）。次に、JavaScriptの周囲に条件付きコメントを配置して、IE 8以前を具体的にターゲットにします（Alex Wで示されています）。このようにして、IE8以前のバージョンでanyStretch機能のみを使用できるようにし、それらのブラウザーでイメージを2回ロードすることを回避します。

于 2013-03-05T18:52:12.117 に答える