Question

我想知道如果有人知道如何在两个背景图像之间进行转换的聪明和新方法？我知道有很多教程，其中大部分都已经过时了。

我想知道是否有一种聪明而现代的CSS3做这样的事情。

我将一个简单的logo.png设置为div.logo的背景（我希望将其设置为不通过img src的背景图片）。当我将鼠标悬停在它上面时，我希望顺利过渡到“logo-hover.png”，这是一个不同颜色的同一个文件。

现在有任何想法如何做到这一点？

我的方法是： - 我创建了一个围绕div.logo位置相对的外部容器。我将两个div放在里面，位置绝对在彼此的顶部。 div.hover设置为display:none，如果我将其悬停，我会使用css3过渡来设置它的不透明度。

这是唯一的方法吗？我真的很喜欢使用一种纯粹的CSS方式，我不需要在dom本身添加一个带有悬停状态的额外div。

有关此事的任何想法？

提前谢谢。

Answer 1

使用此

#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;
}

和

Answer 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/

Answer 3

我认为这就是你想要的： DEMO.

基本上它正在使用像你所说的转换：

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>

有关详细信息，请查看更多examples here

使用css3进行图像替换和转换？

3 个答案: