ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSのbackground-positionプロパティの使用法
背景位置を教えてください: left -29px; これはどういう意味ですか? ?一見、左に-29ピクセル移動したのかと思いましたが、試してみるとそうではありませんでした。専門家に質問してください
は写真の位置を特定するために使用されます。主に1つのpngに複数のロゴやアイコンが存在する場合に使用します
background-position: x y xは平行軸、yは垂直軸に等しい。
x y の値は正の数でも負の数でも構いません
.btn{ background:url(bg.png); background-repeat:no-repeat; background-position:-25px -374px; height:16px; width:24px; }効果は次のようになります:
このようにして、小さな画像が切り抜かれます!単純にする! ! picture写真には+1があり、すべての人に完全なデモンストレーションを与えるために +1を書きました。 ️水平方向のセンタリング の場合は、子ノードの
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 サイトの他の関連記事を参照してください。