背景画像ストレッチ（CSS方式）_html/css_WEB-ITnose-htmlチュートリアル-php.cn

背景画像ストレッチ（CSS方式）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:35:01

オリジナル

1181 人が閲覧しました

現在の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画像をある程度引き伸ばすと、画質が著しく低下します。

②空白部分を右クリックすると、通常の右クリックメニューの代わりに画像の保存が表示されます。