css - CSS - 複数の画像を 1 つにまとめ、CSS を使用して背景を決定する

Question

意味がわからない場合は、次の画像をご覧ください。

複数の画像

CSSはい、それがどのように機能するか知りたいのですが、この画像を使用して背景を使用すると、すべてが正確にどのように機能するのでしょうか。

その方法を知ることは私にとって興味深いでしょう-そうすれば、CSSレベルをもう少し上げることができます:P

ありがとう

Answer 1

あなたが探しているのはCSS Spritesです。これを実現するためのチュートリアルと方法がたくさんあります。基本的にあなたがしていることは、背景を宣言し、背景background-positionに表示されるものを決定するために使用しています。

ところで、CSS スプライトは素晴らしいものです。

Answer 2

{
    height: foo;
    width: foo;
    overflow: hidden;
    background: colour url() no-repeat 0 pixels-to-top-of-image;
}

Answer 3

<div id="buttonOne">Button 1</div>
<div id="buttonTwo">Button 2</div>

#buttonOne, #buttonTwo
{
    background-image: url(/images/ALL-BUTTONS-IN-ONE-IMAGE-TILED-16PX-APART.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

#buttonOne
{
    background-position: 0 0;
}

#buttonTwo
{
    background-position: 0 -16px;
}