0

CSS3を使用した背景画像の遷移に問題があります。問題は、最初にロールオーバーしたときにちらつくことがあることです。2回目にロールオーバーすると、問題なく、一方から他方へのスムーズなフェードイン/フェードアウトが可能になります。

私はこの問題についてグーグルで検索しましたが、同じ問題を抱えている人がたくさん見つかりました。しかし、彼らは1つの背景画像を使用し、次にbackground-positionを使用して、ロールオーバーするまで非表示にすることで問題を解決しました。

1つの画像から別の画像へのスムーズなフェードイン/フェードアウトアニメーションが必要なため、私の場合はそれを行うことができません（同じボタンの2つの画像で、色や物が異なります）。その場所のボタンの下から来るでしょう。フェードインフェードアウトアニメーションが必要です。

したがって、この問題は、画像が読み込まれていないために発生し、読み込みに数分の1秒かかると推測しています。

コードは次のとおりです。

    .btn-denken{
        background:url(../images/btn-denken.png);
        width:219px;
        height:40px;
        float:left;
        -webkit-transition: all 0.3s ease-in-out 0s;
        -moz-transition: all 0.3s ease-in-out 0s;
        -ms-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
    }

    .btn-denken:hover{
        background:url(../images/btn-denken-hover.png);
    }

ヘルプは非常に高く評価されています！ありがとうございました！

4

3 に答える 3

0

おそらく、絶対測位とz-indexを使用して、同じエリアで2つの別々のコンテナを使用できます。コンテナごとに2つの異なる背景画像を設定し、ホバーしたときに上部のコンテナの不透明度を完全に透明にします。

于 2012-10-18T00:56:09.763 に答える
0

私は同じ問題を抱えていました.トランジションを使用して画像間をフェードしたかったのです。2-in-1 画像 (またはスプライト) を使用し、css を使用してホバー時の位置を変更しても、画像が左右または上下にスクロールしてしまうため、機能しません。

（参考までに、あなたは正しいです-画像の読み込みに少し時間がかかるため、まばたきが発生しますが、ホバーした瞬間から遷移がすでに開始されています。一度ホバーすると、画像が読み込まれるため、再度発生することはありませんページをリロードするまで。)

これは、純粋な HTML と CSS のソリューションです。

  • 包含 div を作成する
  • このコンテナ内にアンカー タグとイメージ タグを配置します
  • アンカー タグに背景画像を設定します (これは、ページ読み込み時に表示する画像である必要があります)。
  • 画像タグは、ホバー時に表示する画像である必要があり、アンカー タグの背後に表示するために z-index を適用する必要があります

多くの実験の後、私は次の解決策にたどり着きました: (デモはこちら: http://jsfiddle.net/jmtFK/ )

HTML:

<div class="button" id="specific">
    <a href="" class="link" target=""></a>
    <img>
</div>

CSS:

.button {
    position: relative;
}

.button a {
    display: block;
    width: px;
    height: px;
    background: url() no-repeat;

    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;

    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.button a:hover {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;

    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.button img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;

    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;

    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.button a:hover + img {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;

    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

最初は z インデックス付きの画像を透明に設定していませんでしたが、そのエッジがリンク画像の外側に表示されることがわかりました。これは醜いので、不透明度: 0 を適用しました。

また、「ホバー イン」と「ホバー アウト」の CSS トランジションも追加しました。(基本的に、特定の CSS 状態に適用される遷移設定は、その状態への遷移方法を決定します。たとえば、.button aに適用される遷移設定は、ボタン a: hover が適用されなくなったときに有効になります。

それが役立つことを願っています。

于 2013-05-09T05:39:10.060 に答える