背景位置が背景画像の表示に与える影響この2日間のプロジェクトでホームページの写真を入れ替えていたところ、問題が見つかりました。以前のスタイル設定はbackground-position: centerでした。ページが縮小または拡大されると、背景画像が表示される領域も変更されました。これを左上に変更した後、ページサイズがどう変わっても画像の位置は変わりません。これは意味が分かりません。background-position:center は背景画像を要素の中央に表示すべきではないでしょうか? なぜ背景画像が要素領域全体を占有するのでしょうか?この中心は背景画像の中心を指すのでしょうか、それとも要素の中心を指すのでしょうか? 背景位置プロパティbackground-position は、背景画像の開始位置 (background-position-x と background-position-y) を設定するコレクション プロパティです。使用可能な値は、左、右、上、下、および固定ピクセル値とパーセンテージ値です。
固定ピクセル値の配置はさておき、今回は主にパーセンテージ値が背景画像の位置に与える影響について探っていきます。通常、パーセンテージ値は要素の幅と高さに対するパーセンテージであるべきですが、実際のパフォーマンスはそうではありません。 実際の状況をパーセンテージ値として設定注: 背景要素コンテナとして使用される要素の幅と高さは100%、100%に設定されており、境界線とパディングはありません。 背景サイズ: 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-positionプロパティでのパーセンテージ値の使用法についての説明は終わりです。background-positionのパーセンテージ値に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
>>: Linux 環境に nginx をインストールするチュートリアル
目次1. バックグラウンドで実行されるジョブ2. 信号を使用してプロセスを制御する基本的なプロセス管...
Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...
目次1. Tencent Cloud Serverに接続する2. 環境整備Jenkinsのデプロイメ...
フォームは、get と post の 2 つのデータ転送方法を提供します。どちらもデータを送信する方...
1. Centos7.6システムを作成し、システムを最適化する1. NetworkManagerをオ...
目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...
効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...
1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...
目次序文: 1. Navicatの紹介2. シンプルなチュートリアルの共有接続管理ライブラリテーブル...
目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。一般的な...
成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...
1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...
この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...
この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...
プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...