css - 単一の画像からCSS精神を使用してウィザードを表示する方法

Question

以下のように画像を表示するcss方法を使用して、上記の画像を取得しました。

私はこれにまったく新しいです。私はこれを試しました：

.step{
    background-image: url(images/myimage.png);
    background-repeat: no-repeat;
    background-position: 40px -40px;
}

上記から、グレーの画像にオレンジ色の画像を重ねる方法がわかりますか?

Answer 1

おそらく、これらのクリック可能なリンクを作成することを目指しています.

最初に必要なのは、設計に適した html 構造体を作成することです。あなたの場合、これ：

<div class="spirit">
    <div class="button1"></div>
    <div class="button2"></div>
    <div class="button3"></div>
</div>

次に、次を使用して各ボタンのスタイルを設定できます

.spirit .button1 {display:inline-block;background:url('http://i.stack.imgur.com/6jKtl.png'); width:70px; height:40px; background-position:0px 0px;overflow:hidden;}

誰かがリンクをクリックしたとき、またはリンクの上にマウスを置いたとき..次のようなことをする必要があります：

.spirit .button1:hover, .spirit .button1:active {display:inline-block;background:url('http://i.stack.imgur.com/6jKtl.png'); width:70px; height:40px; background-position:0px 0px;overflow:hidden;}

background-position を使用して画像の位置を制御できます

詳細については、こちらを参照してください: source