CSS 背景画像の座標配置と負の数値テクニックの使用方法の詳細な説明

CSS背景画像 配置は、特に背景画像が多い場合に、レイアウトプロセスでより広く使用されます。この記事では、背景画像の配置に関する知識と負の数が存在する理由について詳しく紹介します。興味のある友人は参照してください。ダウン

背景画像の配置についていくつかの点を明確にする必要があります:

1. 2 つの値のうちの最初の 1 つは水平方向の配置であり、これを X 軸の配置と呼びます。後者の値は縦方向の位置であり、これを y 軸の位置と呼びます。値が 1 つだけの場合、デフォルトは x 軸方向になります。このとき、y 軸方向はデフォルトで上下に揃えられ、中央になります。

2. 座標軸の原点は、対応するコンテナの左頂点です。

3. この座標の y 軸の矢印は下を向いています。つまり、右下隅 (コンテナー内) の x と y の値はすべて正です。

4. x 値と y 値はそれぞれ、座標の原点 (つまり、コンテナーの左頂点) を基準とした背景 絵 の左頂点の値を表します。

5. x y の値はパーセントまたはピクセルで表すことができます。

6. 表現する場合、座標ルールではなく、配置ルールが適用されます。 x が左の場合は、ピクチャの左側がコンテナの左側に揃うことを意味し、x が右の場合は、ピクチャの右側がコンテナの右側に揃うことを意味します。 、x y が中央に等しい場合、画像の上部がコンテナの上部と一致することを意味します。それは中央揃えを意味します。 7. x y がパーセントまたはピクセルで表される場合、その値は負の数になる可能性があります。座標規則を適用すると、負の数の意味を簡単に理解できます。x が負の数の場合、y が負の数の場合、画像の左の頂点がコンテナの左の頂点の左側にあることを意味します。これは、ピクチャの左頂点がコンテナの左固定点の上にあることを意味します。つまり、コンテナの範囲を超えて左上にあります。 以下のいくつかの状況を説明するためにいくつかの図を使用します。青いブロックは画像​​を表し、点線のボックスはコンテナー (p、td、または直接本体) を表します。その中には背景画像しか表示されないことに注意してください。コンテナ I 目に見える部分を表すために白を使用し、コンテナの範囲外にあるものは見えないので、それを表すために灰色を使用します。コンテナの左側の固定点の座標は (0, 0) です。 1つ目、背景画像はコンテナの左上に揃えられます、0px 0pxは左上と書くこともできます
2つ目、背景画像はコンテナの中央にあり、固定点座標は正の値です


3 番目の背景画像部分はコンテナの左上にあり、固定小数点座標は負の値です


この時点で、位置決め値の使用方法が理解できるかもしれませんbackground
で背景画像を正確に見つけるには、最初に紹介した 2 つの画像を見てください。背景の位置とコンテナ内でのみ表示される 2 つのプロパティを使用して、背景画像の特定の部分を呼び出すことができます。全体のイメージを自由自在に。
しかし、呼び出しの便宜のために、これらの小さな画像を配置するときは、いくつかのルールに注意する必要があります。たとえば、小さな画像間の距離は、通常、小さな画像が呼び出されるコンテナのサイズ、またはその距離です。コンテナに入らないように、見せたくない写真が表示されます。

もう 1 つ、位置決めにパーセンテージを使用する場合、アルゴリズムは非常に特殊です。例を示します:
コード:

background: #FFF url(image) no-repeat fixed 50% -30%;

この時点で画像はコンテナ内のどこにあるべきですか?

コンテナの左頂点から画像の左頂点の座標位置は x: (コンテナの幅 - 画像の幅) x50%

y: (コンテナの高さ) - 画像の高さ) x (-30%)

得られた結果 座標ルールを適用すると、差が負でパーセンテージが正の場合、演算結果は負になります。差が負でパーセンテージが負の場合、結果は正になります。まとめると、これが
演算子
の組み合わせアルゴリズムです。演算結果を座標ルールに取り込むことで、画像の位置を取得できます。

例: コンテナーは幅: 600px; 高さ: 600px; 画像は次のようになります:

x: 200px)*50 %

y: (600px-200px)*(-30%) 以下に示すように:

以上がCSS 背景画像の座標配置と負の数値テクニックの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。