ウェブページの背景画像を伸ばす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}); } |
推薦する
MySQL 5.7.10 インストール ドキュメント チュートリアル
1. 依存パッケージをインストールする yum -y インストール gcc-c++ ncurses-...
個人ブログシステムを構築するためのDockerの超シンプルな実装
Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...
Linux CDの意味と使い方
Linux CD とはどういう意味ですか? Linux では、cd はディレクトリの変更を意味します...
Linux lseek関数の使い方の詳しい説明
注：記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...
古典的なスネークゲームの JavaScript 実装
この記事では、古典的なスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに...
nginx をベースにリロードなしでアップストリーム サーバーの動的な自動起動と停止を実装する方法
目次1. Consulクラスタをデプロイする1. 準備3. Consulクラスタを作成する4. 管理...
MySQLカーソルの使い方と機能の詳細な説明
[mysqlカーソルの使い方と機能]例：現在、テーブル A、B、C の 3 つのテーブルがあります。...
TypeScript 列挙の基本と例
目次序文TypeScript の列挙型とは何ですか? TypeScriptで列挙型を使用する際に注意...
浮遊要素によって引き起こされる問題と解決策の詳細な説明
1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...
MySQL における distinct と group by の違い
簡単に言うと、distinct は重複を削除するために使用され、group by は統計を集計するよ...
Nacos で MySQL8 を設定する方法
1. MySQLデータベースnacos_configを作成する2. データベース nacos_con...
Power Shell に vim 実装コード例を追加する方法
1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...
Javascript を使用して、スライドバー効果のあるスライドナビゲーション プラグインを開発します。
目次1. はじめに2. 使用方法3. 開発プロセス1. モデル例2. イベントとアニメーション4. ...
MySQLカスタム関数とストアドプロシージャの詳細な説明
序文この記事では主にMySQLのカスタム関数とストアドプロシージャに関する関連コンテンツを紹介し、皆...
JS のあらゆる場所で絶対等価演算子の使用をやめる
目次概要1. NULL値のテスト2. ユーザー入力を読み取る導入事実の根源はどこにあるのでしょうか?...