background-positionプロパティでのパーセンテージ値の使用法の検討

background-positionプロパティでのパーセンテージ値の使用法の検討

背景位置が背景画像の表示に与える影響

この2日間のプロジェクトでホームページの写真を入れ替えていたところ、問題が見つかりました。以前のスタイル設定はbackground-position: centerでした。ページが縮小または拡大されると、背景画像が表示される領域も変更されました。これを左上に変更した後、ページサイズがどう変わっても画像の位置は変わりません。これは意味が分かりません。background-position:center は背景画像を要素の中央に表示すべきではないでしょうか? なぜ背景画像が要素領域全体を占有するのでしょうか?この中心は背景画像の中心を指すのでしょうか、それとも要素の中心を指すのでしょうか?

背景位置プロパティ

background-position は、背景画像の開始位置 (background-position-x と background-position-y) を設定するコレクション プロパティです。使用可能な値は、左、右、上、下、および固定ピクセル値とパーセンテージ値です。

  • background-position-x: 左 (0% に相当)
  • background-position-x: 右 (100% に相当)
  • background-position-y: 上(0%に相当)
  • background-position-x: 下(100%に相当)

固定ピクセル値の配置はさておき、今回は主にパーセンテージ値が背景画像の位置に与える影響について探っていきます。通常、パーセンテージ値は要素の幅と高さに対するパーセンテージであるべきですが、実際のパフォーマンスはそうではありません。

実際の状況をパーセンテージ値として設定

注: 背景要素コンテナとして使用される要素の幅と高さは100%、100%に設定されており、境界線とパディングはありません。
例1:

背景サイズ: 100px 100px;
背景位置: 100% 100%;

background-position を 100% に設定すると、背景画像が要素領域から溢れることなく、ウィンドウの右下隅に表示されることがわかります。次に、位置を変更します。例 2:

背景サイズ: 100px 100px;
背景位置: 50% 50%;

背景画像が要素の中央に配置されていることがわかります。中央にあることを証明するために、比較のために中央揃えスタイルの子要素を使用しました。子要素によってフレームされていることがわかります。

上記の 2 つの例から、次のことがわかります。

background-position を 100% 100% に設定すると、画像は右下隅にあります。このとき、background-position-x のピクセル値は「コンテナ要素の幅から背景画像の幅を引いた値」に等しく、background-position-y のピクセル値は「コンテナ要素の高さから背景画像の高さを引いた値」に等しくなります。

background-position を 50% 50% に設定すると、画像は要素の中央に配置されます。このとき、background-position-x のピクセル値は「コンテナ要素の幅に 50% を掛けて背景画像の幅の 50% を引いた値」に等しく、background-position-y のピクセル値は「コンテナ要素の高さに 50% を掛けて背景画像の高さの 50% を引いた値」に等しくなります。

w がコンテナ要素の幅、h がコンテナ要素の高さ、bw が背景画像の幅、bh が背景画像の高さを表す場合、上記の 2 つの例から次の数式が生成されます。

背景位置x: パーセント = (幅 - 幅) * パーセント
背景位置 y: パーセント = (h - bh) * パーセント

要素にパディングがある場合:

パディング: 100px 20px 50px 50px;
背景位置: 0% 0%;

背景画像がパディング領域の左上隅にあることがわかります。そのため、background-positionのパーセンテージは、コンテナ要素の幅と高さの計算に実際に関与します = コンテンツ + パディング
background-size が 100% 100% に設定されている場合、background-position は、設定されているパーセンテージに関係なくシフトしません。

逆に、背景画像のサイズが要素のサイズより大きい場合は、パーセンテージを設定すると負のオフセットが発生します。
よし、これでようやくこのプロパティが理解できました。一部の CSS プロパティの説明は正確ではなく、誤解を招く可能性があります。実践を通じてのみ、真の知識を得ることができます。

これで、background-positionプロパティでのパーセンテージ値の使用法についての説明は終わりです。background-positionのパーセンテージ値に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  HTML でよく使われるメタ百科事典 (推奨)

>>:  Linux 環境に nginx をインストールするチュートリアル

推薦する

Linuxの運用と保守、基本的なプロセス管理、リアルタイム監視と制御

目次1. バックグラウンドで実行されるジョブ2. 信号を使用してプロセスを制御する基本的なプロセス管...

エンタープライズプロダクション MySQL 最適化入門

Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...

Tencent Cloud Server での Jenkins の設定方法の詳細

目次1. Tencent Cloud Serverに接続する2. 環境整備Jenkinsのデプロイメ...

フォームのmethod=post/getの違い

フォームは、get と post の 2 つのデータ転送方法を提供します。どちらもデータを送信する方...

Centos7 esxi6.7 テンプレートの実際のアプリケーションの詳細な説明

1. Centos7.6システムを作成し、システムを最適化する1. NetworkManagerをオ...

MySQL データベース データのロード 複数の用途

目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...

Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...

Centos7のFirewalldファイアウォールの基本コマンドの詳細な説明

1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...

Navicatを使ってMySQLを操作する方法

目次序文: 1. Navicatの紹介2. シンプルなチュートリアルの共有接続管理ライブラリテーブル...

Vue3でカルーセルコンポーネントをカプセル化する方法

目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。一般的な...

ろうそくを溶かす(水滴)サンプルコードを実現する純粋な CSS

成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...

VMware 15.5 に CentOS7 をインストールするためのグラフィック チュートリアル

1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...

Reactはラジオコンポーネントのサンプルコードを実装します

この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...

Linux で毎日データベースの自動バックアップを設定する方法

この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...

優れたウェブワイヤーフレーム設計・制作ツール13選を紹介

プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...