CSS背景画像を適応させる方法
クリアで美しい背景画像は、Web ページに多くのポイントを追加できます。デザイナーはページの背景に大きな画像を使用することがよくあります。解像度の違いによって画像が変形することは望ましくありません。この場合、背景に白い部分がありますが、これは簡単に言えば、変形せずに画面サイズに適応できる大きな背景画像を実現することであり、背景画像はスクロールしません。スクロール バーがスクロールするので、背景画像を調整できます。
CSS を使用してこれを行う方法は次のとおりです:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title>
</head>
<body>
<div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--其他代码 ... -->
</div>
</body>
</html>CSS:
#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}次に、CSS の各コードの機能を分析してみましょう:
position:fixed; top: 0; left: 0;
これらの 3 つの文により、div 全体が画面の上部と左に固定されます
width:100%; height:100%; min-width: 1000px;
上の最初の 2 つの文フルスクリーン効果を達成するために、div 全体を画面と同じサイズにすることです。min-width は、画面幅が 1000 ピクセル以内の場合に div のサイズを変更しないようにします。つまり、この例では次に、画面幅を拡大縮小すると、画像は拡大縮小されません（1000px以内のみ有効）。
z-index:-10;
この目的は、HTML ページの各レベルの下に div 全体を作成することです。通常の状況では、最初に作成されたレベルの z-index 値は 0 なので、ここに -1 を書くと、実装ではありますが、ここで -10 を記述するのは、ページ内のレベルが多すぎると、必ずしも -1 が最下位にあるとは限らないため、div 全体が最下位になるようにするためです。 -100 のような大きな数値で書かれている場合。背景画像のように見えるものを実現するには、index:-10 を使用します。実際には最も普通の div ですが、階層関係が変更され、背景画像のように見えます。
background-repeat: no-repeat;
上記は背景です、繰り返さないでください
background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
上の 3 つの文は同じ意味で、画面サイズに合わせて画像を拡大縮小するというものですが、一部の部分が異なります。は切り取られる可能性がありますが、公開されません。次の 2 つの文は、Chrome ブラウザと Opera ブラウザとの互換性を考慮したものです。
background-position: center 0;
上の文は、画像の位置を中央揃え、左揃えという意味です。
以上がCSS背景画像を適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1673
14
1429
52
1333
25
1278
29
1257
24
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
