3

2 つの背景画像間を切り替える賢い新しい方法を知っている人はいますか? 複数のチュートリアルがあることは知っていますが、それらのほとんどは時代遅れで古いものです。

このようなことを行う巧妙で現代的なCSS3の方法があるのだろうか.

シンプルな logo.png を背景として設定していますdiv.logo(経由ではなく背景画像として設定したいimg src)。そして、その上にカーソルを合わせると、同じファイルの色が異なる「logo-hover.png」にスムーズに移行したいと考えています。

最近これを行う方法はありますか？

私のアプローチは次のとおりです。 -div.logo相対位置の周りに外側のコンテナーを作成します。その中に2つのdivを配置し、絶対位置を互いに重ねます。div.hover はに設定されてdisplay:noneおり、ホバーすると、css3 トランジションを使用して不透明度をアニメーション化します。

これがこれを行う唯一の方法ですか？実際には、ホバー状態の div を dom 自体に追加する必要がない、純粋な css の方法を使用したいと思っています。

そのことについて何か考えはありますか？

前もって感謝します。

4

3 に答える 3

3

これを使って

#home .stripes, #home .stripes:hover a {
    text-indent: -9999px;
    width: 116px;
    height: 128px;
    margin: 50px 0px 0px 56px;
    float:left;
    padding: 0;
    background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
#home .stripes a:hover, #home .stripes a:focus {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    opacity: 0;
}

と

于 2012-07-10T15:13:54.123 に答える
2

私は実際にこれに対する解決策を自分で思いついたところです。

画像をスプライトのように見せながら、非常にシンプルに保つ方法が必要でした。

HTML：

<div class="facebookicon">
    <a href="#!"><img src="http://example.com/some.png"></a>
</div>

CSS：

.facebookicon img {
    background: #fff;
    transition:  background 400ms ease-out;
}

.facebookicon img:hover {
    background: #3CC;
    transition:  background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */

あなたはここでそれを見ることができます：

http://jsfiddle.net/mattmagi/MpxBd/

于 2012-07-17T19:54:37.137 に答える
1

これがあなたが望むものだと思います： デモ。

基本的には、あなたが言ったようにトランジションを使用しています:

CSSマークアップ:

.imagesTest {
    position:relative;
    height:200px;
    width:300px;
}
.imagesTest img {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.imagesTest img.top:hover {
    opacity:0;
}​

HTMLマークアップ:

<div class="imagesTest">
    <img class="bottom" src="some/image" />
    <img class="transition" src="some/image" />
</div>​

詳細については、ここで他の例を確認してください

于 2012-07-10T15:03:11.613 に答える