背景画像を画面全体に表示するにはどうすればよいですか? _html/css_WEB-ITnose

(今日、Zhihu でこの質問に回答し、回答を直接転送しました...)

私はこの質問に注目してきました (実際、私は全くの初心者なので...

今、いくつかあることを知りました)方法:

① CSS 処理方法 (IE のみ)

#backGroundImg {  background-image: url("X.png");  background-repeat: no-repeat;  filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上这个，详细可Google*/}

② 背景画像を十分な大きさにする
通常、私たちがデザインする画像は 1440 * 900 を上限として中央に配置されます。ディスプレイはほとんどの画面に適応しますが、現在、モニターはますます大きくなり、Mac では Retina 画面の超高解像度が実現されています。解像度が背景画像のサイズを超えると、エッジが背景になってしまいます。
したがって、最も直感的な方法は、背景画像のサイズを 2 倍、2 倍、そして 2 倍にすることです...主流のブラウザーの最大解像度を超える限り、画像が大きすぎてもデメリットはありません。 Web ページの読み込み速度に大きく影響します

③ Js/jQuery を使用してサイズを制御します (これは実際には誤った背景適応です)
a1f02c36ba31691bcfe87b2722de723b タグを使用してインデックスを低く設定し、次を使用します。 Js/jQuery を使用してウィンドウのサイズを監視し、画像の長さと幅を変更します (詳細については Google を参照してください) ただし、この方法は、画像が過度に引き伸ばされたり圧縮されたりすると非常に深刻になります...
また、右クリック機能をブロックすると非常に苦痛になります。右クリック機能をブロックしないと恥ずかしいことになります

④a1f02c36ba31691bcfe87b2722de723b 要素を使用して調整します
これは実際には③と似ています。 Web ページ全体の場合は、最初の 6c04bd5ca3fcae76e30b72ad730ca86d の直後に a1f02c36ba31691bcfe87b2722de723b を追加し、CSS を
width:100%;
height:100%; に設定します。ブラウザの拡大・縮小に合わせて自動的に拡大・縮小されます。 デメリットは③と同様です。