ウェブページの背景画像を伸ばす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}); } |
推薦する
VUEのデータプロキシとイベントの詳細な説明
目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...
Dockerコンテナを更新、パッケージ化、Alibaba Cloudにアップロードする方法
今回は、実行中のコンテナをイメージにパッケージ化して Alibaba Cloud にアップロードし、...
CSS での三角形の描画と巧妙な応用例の詳細な説明
鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...
JavaScript の重要なブレークポイント デバッグ手法の概要 (推奨)
目次デバッガーを使用する理由は何ですか? Chromeデバッガーの基本的な使い方VS Code によ...
JavaScript を使用してソートアルゴリズムを実装する方法
目次バブルソート選択ソート挿入ソート要約するバブルソートバブルソートは、シーケンスの右側から始めて、...
jsはショッピングサイトの虫眼鏡機能を実現します
この記事では、ショッピングサイトの虫眼鏡機能を実現するためのjsの具体的なコードを紹介します。具体的...
Webデザインチュートリアル（8）：Webページの階層と空間デザイン
<br />前回の記事：Webデザイン講座（７）：Webページ制作の効率化１：必要な小言...
この SQL 書き込み方法では本当にインデックスが失敗するのでしょうか?
序文インターネット上には、MySQL でインデックスにヒットできないさまざまな状況をまとめた記事がよ...
Linux サーバーのクイックアンインストールとノード環境のインストール (簡単に始められます)
1.まずnpmをアンインストールする sudo npm アンインストール npm -g 2. ノー...
MySQL がタイムスタンプを使用するときにタイムゾーンの問題を無視できるのはなぜですか?
私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...
Nginx の動的および静的分離実装ケースのコード分析
静的と動的の分離動的リクエストと静的リクエストはミドルウェアを通じて分離され、不要なリクエストの消費...
VMware15 の CentOS7 インストールの詳細なプロセスとよくある問題 (画像とテキスト)
1. インストールパッケージの準備VMware-player-15.0.4-12990004、非商...
Spark と Scala を使用して Apache アクセス ログを分析する方法
インストールまず、Java と Scala をインストールし、次に Spark をダウンロードしてイ...
ORM を使用して MySQL にデータを追加する手順
【序文】 ORM を使用してデータベース内のデータを操作する場合、前提として、新しい ORM モデル...
MySQLユーザー権限テーブルについての簡単な説明
MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...