ウェブページの背景画像を伸ばす2つの方法

ウェブページの背景画像を伸ばす2つの方法
解決策は2つあります。

1つはCSSで、background-size:coverを使用して画像の伸縮効果を実現しますが、IE8以下ではbackground-sizeがサポートされていないため、Microsoftのフィルター効果を使用できますが、IE6ではサポートされていません。

コードをコピー
コードは次のとおりです。

body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%;
フィルター:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}

もう 1 つの方法は、jQuery を使用して、body に div を動的に挿入し、その div に画像を含めることです。ブラウザー ウィンドウのサイズが変更されると、背景画像のサイズが動的に設定されます。
コードをコピー

コードをコピー
コードは次のとおりです。

$(関数(){
$("body").append("<div id='main_bg' style="position:absolute;"/>");
$("#main_bg").append("<img src='bg.jpg' id='bigpic'>");
カバー();
$(window).resize(function(){ //ブラウザウィンドウの変更
カバー();
});
});
関数カバー(){
var win_width = $(window).width();
var win_height = $(window).height();
$("#bigpic").attr({幅:win_width,高さ:win_height});
}

<<:  JavaScript の高度なクロージャの説明

>>:  Linuxサーバーのディスク容量を拡張する方法

推薦する

Vue イメージ ドラッグ アンド ドロップ ズーム コンポーネントの使用方法の詳細な説明

Vueイメージドラッグアンドドロップズームコンポーネントの具体的な使い方は参考までに。具体的な内容は...

MySQLをインストールして設定し、ルートパスワードを変更する方法

1. インストールapt-get install mysql-server にはアカウントとパスワー...

XHTML の IE 条件付きコメント

<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...

vue-cli4.5.xはプロジェクトを素早く構築します

1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...

MySQL データ圧縮パフォーマンス比較の詳細

目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...

Angularデータバインディングとその実装の詳細な説明

目次序文データバインディングとは何ですか? Angular のデータバインディングの種類一方向データ...

Dockerコンテナ同士を接続する3つの方法の詳しい説明

Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...

ウェブデザインの詳細分析に関する詳細な議論

設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...

一般的なMysql DDL操作の概要

図書館管理ライブラリを作成する データベースを作成します [存在しない場合] ライブラリ名;ライブラ...

MySQLに必要な共通知識のまとめ

目次主キー制約一意の主キー非 Null 制約デフォルトの制約外部キー制約1NF 2NF 3NFデータ...

クリックして展開し、全文を読む機能を実現する純粋なCSS

注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...

MySQL 5.7 クラスタ構成手順

目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...

クラウドネイティブテクノロジー Kubernetes (K8S) の紹介

目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...