ホームページ > 記事 > ウェブフロントエンド > 背景画像ストレッチ（CSS方式）_html/css_WEB-ITnose
背景画像ストレッチ（CSS方式）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:35:011117ブラウズ
現在のWebサイトのトップページをレイアウトする際に問題を発見しました。背景画像として1440*900のpng画像を使用しました。ページ内の Div は、より多くのパーセンテージ アダプティブ フレーム サイズを使用しています。元の body 要素の CSS は次のとおりです。
html { width: 100%; height: 100%;}body { background: url(../img/bg.png) no-repeat; margin: 0; padding: 0; width: 100%; height: 100%; overflow: auto;} 背景画像は、画像を繰り返しタイル表示すると非常に見苦しくなります。ショップ加工ではありません。
これが完了すると、解像度が1440*900以下のモニターでは問題ありませんが、それ以上の解像度のモニターで見るとブラウザのサイズに合わせてフレームが伸びてしまうことが分かります。 , しかし、背景 画像が1440*900を超えると、隙間が白い背景で埋められてしまい、非常に見苦しいです。
その後、処理方法を検索したところ、jsで処理したもの（Js学習中のため使用しませんでした）や、一定の互換性条件下でCSSで処理したものもありました。
そこで、以下の方法で背景をやり直します。
HTMLパートコード:
<!DOCTYPE html><html><head> <meta charset="utf-8" /></head><body> <img id="background_img" src="img/bg.jpg" /></body></html>
CSSパートコード:
html { width: 100%; height: 100%;}body { /*background: url(../img/bg.png) no-repeat;*/ margin: 0; padding: 0; width: 100%; height: 100%; overflow: auto;}/* ------------ Background Img ------------------*/#background_img { z-index: -999; position: fixed; left: 0; top: 0; width: 100%; height: 100%;} 完成後、背景画像(実際には擬似背景、ページ上のimgとなっています)がサイズに合わせて変化します。ブラウザでストレッチ。
この方法の問題点:
① jpg画像をある程度引き伸ばすと、画質が著しく低下します。
②空白部分を右クリックすると、通常の右クリックメニューの代わりに画像の保存が表示されます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。