ウェブページの背景画像を伸ばす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サーバーのディスク容量を拡張する方法

推薦する

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

実用的な MySQL + PostgreSQL バッチ挿入更新 insertOrUpdate

目次1. 百度百科事典1. MySQL 2. PostgreSQL 3. MySQL に対する Po...

mysql ワイルドカード (sql 高度なフィルタリング)

目次まず、値の一部と一致させるために使用される特殊文字であるワイルドカードについて簡単に紹介します。...

Django+mysql の設定と簡単な操作データベースのサンプルコード

ステップ1: MySQLドライバをダウンロードするcmdは作成されたDjangoプロジェクトディレク...

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...

TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...

Docker のインストールと構成コマンドのコード例

Dockerのインストール依存パッケージをインストールする sudo yum install -y ...

HTML テーブル マークアップ チュートリアル (15): テーブル タイトル

<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...

Centos サーバーに MySql をデプロイし、Navicat に接続するプロセスの詳細な説明

(1)サーバー構成: [root@localhost ~]# cd /usr/local/src/ ...

VUE レンダリング機能の使い方と詳細な説明

目次序文レンダリングの役割レンダリング機能の説明レンダリングとテンプレートの違いレンダリング例要約す...

nginx のバージョン番号と WEB サーバー情報を隠すための解決策

Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

SQL ROW_NUMBER() および OVER() メソッドのケーススタディ

構文フォーマット: row_number() over(partition by grouping ...

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

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