背景シリーズ：background-position_html/css_WEB-ITあなたの知らない鼻

これは興味深いトピックです

実際のところ、人々が通常どのように属性や値を適用したり操作したりするのか、正確にはわかりません。私が確信しているのは、これらのアイテムには多くのプレイアビリティがあるということです。

今日話したい背景ポジションは、みんながカラフルに演じたはずです。特に CSS スプライトが普及した近年では、background-position は基本的に最もよく使用されるプロパティの 1 つです。

昔の楽しみを取り戻しましょう

私たちは、background-position を使用して背景画像のオフセット値を指定することを知っています。これにより、画像を特定の位置から表示し始めることができます。 CSS スプライトは、複数の小さな画像を 1 つの大きな画像に結合し、background-position を使用して表示する必要がある領域を指定することで、HTTP リクエストをマージするという期待を実現します。

非常に単純なアプリケーション

背景位置の適用を確認するために、最も単純な例を使用します。ここでは 2 つの 300*100px を垂直に結合します。結果の画像は次のように使用されます。図 0 に示す背景画像:

2 つの横に並んだ div に異なる部分を表示するには、図 0 が必要です:

HTML:

<div class="part1"><!-- 显示图0上半部分 --></div><div class="part2"><!-- 显示图0下半部分 --></div>

そこで、次のように簡単な CSS を書きました。

CSS:

div { width: 300px; height: 100px; background: gray url(../test.png) no-repeat;}.part1 { background-position: 0 0;}.part2 { background-position: 0 -100px;}

図 1 に示すように、明らかに期待どおりの結果が得られます。

これは、最も典型的な CSS スプライトの使用シナリオです。もちろん、この例はオンラインで見ることができます。 Demo1 最も単純な背景位置アプリケーションです。

デフォルト値

背景位置のデフォルト値は 0% 0% であるため、上記の CSS コードは実際には次のように最適化できます:

.part2 { background-position: 0 -100px;}

.part1 で指定する値はデフォルト値と同じ 0 0 なので省略可能です。プロパティについて詳しく知ると、より簡潔なコードを書くのに役立つことがわかります。

パーセンテージ

背景位置のパーセンテージを使用したことがあるかどうかはわかりませんが、おそらくあまり知らないと思います。

パーセンテージを使用して前の例を実装してみます

次のように記述する子供用の靴があるはずです:

.part2 { /* background-position: 0 -100px; */ background-position: 0 -50%;}

一般的な考え方によれば、上記の 2 行のコードは同等であるはずですよね。冒頭で、背景画像 0 の高さは 200px だと言いましたので、-50% はちょうど -100px になります。

心配しないでください。実際の例を使用してこの結果を検証します。Demo2 を見て、background-position のパーセント値を確認してみましょう。

結果は少し残念ですが、これはなぜでしょうか。

ソースに戻る

パーセンテージ値には参照サイズが必要であることは誰もが知っています。たとえば、要素の幅を 50% と定義した場合、この要素の具体的な幅は、ブロックを含む幅 * 50% となります。

したがって、background-position の値としてパーセンテージを使用する必要がある場合は、その基準サイズが何であるかを知っておく必要があります。

w3c では、背景と位置のスコア率を次のように説明します。

原文: 背景位置決め領域のサイズから背景画像のサイズを引いたものを参照してください。

翻訳:背景領域の幅から背景画像の幅を引いた値を指定するを参照してください。

これはどういう意味ですか?率直に言うと、background-position のパーセンテージ値は、背景が設定されている領域から背景画像のサイズを引いたものを指します。

やり直し

このアイデアに従って、次のようになります:

.part2 { background-position: 0 -50%;}

変換後は次のようになります。

.part2 { background-position: 0 50px;}

変換プロセスは次のとおりです: (背景の領域の高さを設定 - 背景画像の高さ) * -50%、つまり: (100 - 200) * -50 % = 50px

これは、Demo2 が図 2 の効果を得られる理由を説明します。しかし、これは明らかに私たちが望んでいることではありません。期待される効果は図 1 です。

上記の式に従って、期待される効果のパーセンテージ値を推測できます:

-100 / (100 - 200) = 100%

したがって、次のように使用したい場合は、

.part2 { background-position: 0 100%;}

結果は、背景位置のパーセンテージを正しく使用した Demo3 と同様です

これ期待される効果は非常に巧妙です。子供用の靴に興味がある人は、ここでは詳しく説明しません。

また、background-size は背景画像のサイズを変更する可能性があるため、パーセンテージの値はbackground-size の影響を受けることに注意してください。

複数の値

CSS3 では、background-position プロパティが拡張され、背景画像の開始方向と特定の位置を指定するために使用される 3 ～ 4 つのパラメーターを受け入れられるようになりました。 。

原文：If three or four values are given, then each or represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given.

翻译：如果指定了三个或四个值，那么每个 或 之前必须有一个关键字，用于指定该方向的偏移量。

当指定3到4个参数时，不接受 center 关键字作为偏移量作为边界，只能使用 top, right, bottom, left 这4个关键字。

多值的意义

在此前，我们使用 background-position 只能让背景图从 top, right, bottom, left, center 这5个边界开始显示，但无法指定任意一个边界的偏移量。

举个例子：我想让一个背景图从右下角偏移 20px

你会发现如果没有多值扩展，你很难轻易做到这件事，除非你能确定容器的宽高永远都是显式定义好的，就算如此，其灵活性也一文不值。

多值的应用

如果利用多值特性，这将变得非常轻松，我们仍使用 图0 作为背景图，来做一个演示。

.demo { width: 400px; height: 400px; background: url(../test.png) no-repeat; background-position: right -300px bottom 20px;}

这会终于得到我们的预期效果了，请看 图4

效果可以查看 Demo4 background-position 边界偏移 。实际上，有了多值之后，我们可以让背景图在任意方位上偏移，你可能会发现，这甚至可以让你的结构写得更简单，嵌套变浅。

写在最后

当你深入了解了每个属性的每个定义，你的CSS世界又会变得和以前不一样。enjoy it.

background系列文章：