15 
a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;


    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px;
}

..現在はスクロールアップ/ダウン効果がありますが、フェード効果で背景を変更したいのですが、CSSで何を変更すればよいですか?

ありがとう！

4

3 に答える 3

25

ブラウザが補間したいものを知る方法がないため、2つの背景画像間を移行することはできません。あなたが発見したように、あなたは背景の位置を変えることができます。マウスオーバーで画像をフェードインさせたい場合は、CSSトランジションを使用して画像を含む要素に画像を配置し、リンク自体で背景色を透明にアニメーション化するのが最善の方法だと思います。

span {
    background: url(button.png) no-repeat 0 0;
}
a {
    width: 32px;
    height: 32px;
    text-align: left;
    background: rgb(255,255,255);

    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    }
a:hover {
    background: rgba(255,255,255,0);
}
于 2010-06-26T19:07:39.540 に答える
4

スクロール効果は、より具体的な background-image ではなく、css で汎用の「background」プロパティを指定することによって発生します。background プロパティを設定すると、アニメーションはすべてのプロパティ間で遷移します。Background-Color、Background-Image、Background-Position..など、スクロール効果が発生します。

例えば

a {
-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
}
于 2011-02-11T00:23:37.423 に答える
3

可能です。以下の構造を使用してください。

<li><a><span></span></a></li>
<li><a><span></span></a></li>

等...

上記のように、スパンを含むアンカータグが含まれている<li>場所。<a>次に、次の css を挿入します。

  • LI ゲットposition: relative;
  • タグ<a>にheight,width
  • <span> width&heightを 100% に設定して、<a>との両方<span>が同じ次元になるようにします。
  • との両方<a>を<span>取得しposition: relative;ます。
  • 各要素に同じ背景画像を割り当てる
  • <a>タグには 'OFF'background-positionがあり、<span>には 'ON' がありbackground-poisitonます。
  • 「オフ」状態の場合、不透明度 0 を使用します。<span>
  • 「ON」:hover状態の場合、不透明度 1 を使用します。<span>
  • 要素に-webkitまたは-mozトランジションを設定する<span>

background-position古いスワップをデフォルトのままにしながら、トランジション効果を使用することができます。IE アルファ フィルターを挿入することを忘れないでください。

于 2010-12-29T03:53:11.750 に答える