7

ここでちょっとした質問ですが、通常の効果とホバー効果のあるアイコンを含むスプライト画像があります..

そして、これは私が今持っているcssです..

.wi{
    background-image:url(images/icons/small/wi.png);
    background-repeat:no-repeat;
    display:block;
    overflow:hidden;
    height:24px;
    width:24px;
}

.wi-delete{background-position:0 0;}
.wi-edit{background-position:-24px 0;}
.wi-fullscreen{background-position:-48px 0;}
.wi-imageedit{background-position:-72px 0;}
.wi-download{background-position:-96px 0;}
.wi-tags{background-position:-130px 0;}
.wi-windowed{background-position:-154px 0;}

ご覧のとおり、アイコンの通常の状態は常に背景の位置Y = 0にあるため、ホバー画像はすべてY = -24px

アイコンの私のhtmlは次のとおりです。

<div id="something" class="wi wi-delete"></div>

問題は、Y 位置のみを変更して、すべてのアイコンに 1 つの CSS 行を割り当てる代わりに、すべてのアイコンのホバー状態に単一の CSS 行を割り当てることができるということです。

何かのようなもの：

.wi:hover{
background-position: auto -24px;
}

代わりは

.wi-delete:hover{background-position:0 -24px;}
.wi-edit:hover{background-position:-24px -24px;}
..and so on..
4

1 に答える 1

6

あなたの痛みが分かります！

すべてのブラウザで機能するわけではありません。

に分割background-positionしてbackground-position-x、background-position-y1 つの軸のみを簡単に変更できるようにすることが提案されました。悲しいことに、W3C の人々は、標準に追加するほど有用ではないと判断しました。詳細については、こちらのBugzilla スレッドとこちらの w3c Web サイトをご覧ください。

ただし、Chrome では動作しますが、主要なブラウザからは Firefox だけがサポートされていないようです。しかし、それはまだ標準にはなっておらず、CSS 4 まではそうではないかもしれません。

于 2013-01-23T08:22:51.907 に答える