ウェブページの背景画像を伸ばす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 イメージ ドラッグ アンド ドロップ ズーム コンポーネントの使用方法の詳細な説明
Vueイメージドラッグアンドドロップズームコンポーネントの具体的な使い方は参考までに。具体的な内容は...
CSSは解析プロセスでさまざまな読み込み効果を実装します
html <div class="スピナー"></div&g...
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操作の概要
図書館管理ライブラリを作成する データベースを作成します [存在しない場合] ライブラリ名;ライブラ...
Docker でリモートの安全なアクセスを有効にする方法の詳細なグラフィック チュートリアル
1. docker.serviceファイルを編集する: : vi /usr/lib/systemd/...
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...