CSSのbackground-positionプロパティの使用法-CSSチュートリアル-php.cn

CSSのbackground-positionプロパティの使用法

黄舟

リリース： 2017-06-21 14:55:38

オリジナル

2062 人が閲覧しました

背景位置を教えてください: left -29px; これはどういう意味ですか? ?一見、左に-29ピクセル移動したのかと思いましたが、試してみるとそうではありませんでした。専門家に質問してください

は写真の位置を特定するために使用されます。

主に1つのpngに複数のロゴやアイコンが存在する場合に使用します
background-position: x y xは平行軸、yは垂直軸に等しい。
x y の値は正の数でも負の数でも構いません

div は長方形のボックスとして理解でき、その左上隅が頂点であり、div の場合、背景画像の頂点も左上隅になります。背景画像をロードすると、2 つの頂点が一致し、頂点の座標は (0,0) になります。わからない場合は、図を見てください。非常に簡単です。。。

CSSのbackground-positionプロパティの使用法

+1 の小さな画像が大きな画像に混在している場合は、background-position 属性を使用して、大きな画像の頂点を移動しないようにする必要があります。対象の小さな絵の頂点にdivを配置すると以下のようになります

CSSのbackground-positionプロパティの使用法

このように、div内に小さな絵が表示されます。ただし、表示されるのは小さな絵だけではありません。画像の影の部分はどうすればいいでしょうか？ divの幅と高さを小さい画像の幅と高さと同じになるように設定してください。！ K Background-Position プロパティを見てみましょう。これには、水平方向に移動するピクセルと垂直方向に移動するピクセルの 2 つのパラメーターがあります。これらは負の数で表されます。大きな画像が動かずに div が動く場合、これら 2 つの方向に移動するピクセルは負の数で表されることに注意してください。

したがって、大きな画像の左上隅の頂点に対する小さな画像の水平移動ピクセルと垂直移動ピクセルを見つけるだけです。 Xiaocai には専門的なツールは必要ありません。大きな画像の左上隅から切り取りを開始し、小さな画像の上部で停止すると、ほぼ同じになります。デバッグを繰り返して、基本的には完了です。

この例では、小さな画像 A の変位は -25px -374px、小さな画像 A のサイズは 24px 16px です。したがって、CSS スタイルは次のようになります:

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
}

ログイン後にコピー

効果は次のようになります:

このようにして、小さな画像が切り抜かれます!単純にする！！ picture写真には+1があり、すべての人に完全なデモンストレーションを与えるために +1を書きました。 ️水平方向のセンタリング CSSのbackground-positionプロパティの使用法の場合は、子ノードの

text-align

:center を設定する必要があります。 div内のリンク、 a タグの

line-height

属性を div の高さと同じになるように設定するだけです。スタイルは次のとおりです:

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
    text-align:center;
}
.btn a{
    line-height:16px;
}

ログイン後にコピー

効果は次のとおりです: このテクノロジーには長所と短所があります。利点は、写真がすべてまとめられているため、リクエストするときに 1 枚の写真だけをリクエストするだけで済むことです。これにより、サーバーとのやり取りの数が減り、ホバーの遅延読み込みの問題も解決されます。欠点は、制御が難しく、拡張性があまり良くないことです。将来的に変更があった場合、それは全体に影響を与えると言え、画面解像度の違いにより背景の破損が発生する場合があります。

以上がCSSのbackground-positionプロパティの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。