他の Web サイトのスタイルを研究すると、Web ページのさまざまな部分の使用を満たすために、多くの背景属性で同じ画像が使用されている状況がよくわかります。このような画像を開いて見てみると、この画像には次のような小さな画像が多数含まれていることがわかります。
別の例:
これらの小さな画像は、画像全体が分割された後の部分であり、各部分は個別の画像として保存されるのではなく、1 つの画像上に配置されます。その目的は、http リクエストの数を減らし、時間と帯域幅を節約することです。
では、画像の一部だけが異なる場所に表示されることをどのように認識するのでしょうか。これには、今日説明する背景画像の位置の問題が使用されます。この問題で落ち込んでいる人も多いと思いますし、友達からもよく聞かれるので、今日は体系的に説明します:
画像を背景として使用する場合、 CSS は次のように記述する必要があることがわかります。例えばボディでも良いですし、tdやpなどの背景も同じです。
コード: div{ 背景: #FFF url(image) no-repeat fixed xy;} |
ここでの背景属性値は次のとおりです:
#FFF背景色: (色の値、背景画像が覆われていない場所、または背景がある場合)背景画像の背景色はありません)
画像の背景画像: (ここに画像のアドレスがあります)
no-repeat を繰り返すかどうか: (ピクチャがコンテナのサイズより小さい場合、デフォルトではピクチャはコンテナを満たすように繰り返し配置されます。no-repeat は繰り返しがないことを意味します。このときのみ、以降の位置座標は変更されません)役に立つ。）
固定背景がコンテナと一緒にスクロールするかどうか: (オプションの値は 2 つあり、スクロール スクロール、固定はスクロールしません、デフォルトはスクロールです)
xy 背景画像の配置: (配置は繰り返しなしでのみ意味があることに注意してください。これが今日の焦点です)
背景画像の配置についていくつかの点を明確にする必要があります:
1. 2 つの値の最初の 1 つは水平位置決めであり、これを x 軸位置決めと呼びます。後者の値は縦方向の位置であり、これを y 軸の位置と呼びます。値が 1 つだけの場合、デフォルトは x 軸方向になります。このとき、y 軸方向はデフォルトで上下に揃えられ、中央になります。
2. 座標軸の原点は、対応するコンテナの左頂点です。
3. この座標の y 軸の矢印は下を向いています。つまり、右下隅 (コンテナーの内側) の xy 値はすべて正です。
4. xy 値はそれぞれ、座標原点を基準とした背景画像の左頂点 (つまり、コンテナの左頂点) の値を表します。
5. xy の値は、パーセントまたはピクセルで表すことができます。
6. xy は、「左、右、上、下、中央」の 5 つの配置方法でも表現できますが、注意: 「左、右、上、下、中心」で表現される場合は、配置規則が適用されます。コーディネートルールよりもx が左の場合は、ピクチャの左側がコンテナの左側に揃うことを意味し、x が右の場合は、ピクチャの右側がコンテナの右側に揃うことを意味します。 、 xy が中心に等しい場合、画像の上部がコンテナの上部と一致することを意味します。それは中央揃えを意味します。
7. xy がパーセンテージまたは px で表される場合、その値は負の数になる可能性があります。座標規則を適用すると、負の数の意味を簡単に理解できます。x が負の数の場合、y が負の数の場合、画像の左の頂点がコンテナの左の頂点の左側にあることを意味します。これは、ピクチャの左頂点がコンテナの左固定点の上にあることを意味します。つまり、コンテナの範囲を超えて左上にあります。
以下では、いくつかの状況を説明するためにいくつかの図を使用します。青いブロックは画像を表し、点線のボックスはコンテナー (div、td、または直接本体である可能性があります) を表します。コンテナー内の背景画像のみが表示されることに注意してください。表示される部分を白で示し、コンテナの範囲外にあるものは見えないことを示します。コンテナの左側の固定点の座標は (0, 0) です。
1つ目は、背景画像をコンテンツの左上に揃えます。0px 0pxを左上と書くこともできます
2 番目の図では、背景イメージがコンテナーの中央にあり、固定小数点座標は正の値です。
3 番目の図では、背景画像がコンテナの左上にあり、固定小数点座標は負です
------------------------ ----------------------------------------------------
この時点で、背景の位置決め値を使用して背景画像を正確に配置する方法を理解できると思います。最初に紹介した、背景の位置決めとコンテナー内でのみ表示される 2 つのイメージを見てみましょう。 . 画像全体の特定の部分を自由に呼び出すためのプロパティ。
ただし、呼び出しの便宜上、これらの小さな画像を配置するときは、いくつかのルールに注意する必要があります。たとえば、小さな画像間の距離は、通常、小さな画像が呼び出されるコンテナのサイズか、それよりも大きくなります。コンテナに表示されないようにするには、見せたくない写真を見せてください。
さらに、位置決めにパーセンテージを使用する場合、アルゴリズムはかなり特殊になります。例を示します。
コード： background:#FFF url(image) no-repeat fixed 50% -30%; |
このとき、画像はコンテナ内のどこに配置されるべきですか? アルゴリズムの式は次のとおりです
。コンテナの左頂点からの画像の左頂点の
x: (コンテナの幅 - 画像の幅) x50%
y: (コンテナの高さ - 画像の高さ) x (-30%)
取得された結果には座標規則が適用されます。差が負でパーセンテージが正の場合、演算の結果は負になります。差が負でパーセンテージが負の場合、結果は正になります。全体として、ここでの操作はアルゴリズムに準拠しています。演算結果を座標ルールに取り込むことで、画像の位置を取得できます。
例: コンテナは幅: 600 ピクセル、高さ: 600 ピクセル、画像は幅: 200 ピクセル、高さ: 200 ピクセルです。
上記のスタイルを使用すると、画像の位置を次のように取得できます。
x: (600px-200px)*50%
y: (600px-200px)*(-30%)
以下に示すように:
