2

これは背景画像です：

背景画像

#logo
{background-image:url('logo.png');width:20px;height:23px;}
#logo:hover
{background-position:0 -23px;-webkit-transition: all 0.5s ease;}
#logo span
{margin-left:-3000px;}

<a href="#"><div id="logo"><span>logo</span></div></a>

このコードは、探しているフェード効果ではなく、スライド効果 (黒の S からピンクの S への垂直方向のスライド) を提供します。2 つの画像を作成すると問題は解決しますが、この場合は不可能です。

単一の画像のみを使用する場合にフェード効果を得るにはどうすればよいですか?

4

1 に答える 1

5

これを試してください - http://jsfiddle.net/Wds5z/4/

a, #logo {
    background: url('http://i.stack.imgur.com/w5ZnN.png') 0 -23px;
    width: 20px;
    height: 23px;
    display: block;
}

#logo {
    background-position: 0 0;
    -webkit-transition: opacity .5s linear;
       -moz-transition: opacity .5s linear;
            transition: opacity .5s linear;
}

#logo:hover {
    opacity: 0;
}

#logo span {
    margin-left:-3000px;
}​
于 2012-07-06T23:35:31.977 に答える