1

phpで画像srcを設定し、cssでスタイルを制御しています。画像スプライトがありますが、何をしても画像が目的の領域にクリップされていないようです。背景サイズが24x24pxに設定されているにもかかわらず、画像全体が表示されるだけです。

img srcは、cssのbg-imageに移動するのではなく、HTMLにとどまる必要があることに注意してください:)

jsfiddleはここで見ることができますjsfiddle.net/s6UnV

何か案は？

#swap li img {
    background-position: 0 0px;
    background-size: 24px 24px;
    display: block;
    text-indent: -10000px;
    -webkit-transition: background-position .6s;
    -moz-transition: background-position .6s;
    -o-transition: background-position .6s;
    -ms-transition: background-position .6s;
    transition: background-position .6s;
}

#swap li img:hover {
   background-position: 0 -24px;
}
4

1 に答える 1

3

スプライトにはタグ img を使用しないでください。スプライト効果を追加したい背景画像の div を使用する必要があります。

ここでjsFiddleを更新しました更新されたjsFiddle

私がしたことは次のとおりでした

Htmlをに変更しました

<ul id="swap">
  <li>
    <a href="www.google.com" target="_blank">
       <div class="fb-sprite" style=" background-image:url('http://rldesign.net/Joomla3/modules/mod_social_css3/assets/glyph/facebook_hover.png')">
      </div>
    </a>
  </li>
</ul>

css に fb-sprite クラス スタイルを追加しました。

.fb-sprite{
    width:24px;
    height:24px;
    background-position: 0 0px;
    background-size: 24px 48px;
    display: block;
    -webkit-transition: background-position .6s;
    -moz-transition: background-position .6s;
    -o-transition: background-position .6s;
    -ms-transition: background-position .6s;
    transition: background-position .6s;
    }

.fb-sprite:hover{
   background-position: 0 -24px;
    }

それが役に立てば幸い

追伸: これに不透明効果を使用して、Facebook のロゴが突然消えないようにすることもできます。

乾杯。

編集:これで、img の URL をプログラムで変更でき、スタイルが機能します。jsFiddleも更新しました

于 2013-01-15T12:10:26.510 に答える