图像替换和转换与css3？ [英] Image substitution and transition with css3?

问题描述

我想知道如果有人知道一个聪明和新的方式如何使两个背景图像之间的过渡？我知道有多个教程，其中大多数是过时的和旧的。

我想知道是否有一个聪明和现代的CSS3方式做这样的事情。 / p>

我有一个简单的logo.png设置为 div.logo 的背景（我想将它设置为一个背景图片不通过 img src ）。当我将鼠标悬停在它上面时，我需要平滑过渡到logo-hover.png，这是一个不同颜色的文件。

现在有什么想法怎么做？

我的方法是这样：
- 我在 div.logo 相对。我把两个div放在里面，位置绝对在彼此的顶部。 div.hover设置为 display：none ，如果我悬停它，我使用css3过渡动画它的不透明度。

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

关于这个问题的任何想法？

提前谢谢。

解决方案

我想要一种方法让图像看起来像是一个精灵，但保持超级简单。

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; 
} 
 / *您需要添加各种浏览器前缀以转换* / 
 / *为简洁起见* / 
  

您可以在这里查看：

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

I wonder If anybody knows a clever and new way how to make a transition between two background images? I know there are multiple tutorials out there just most of them are outdated and old.

I wonder if there is a clever and modern CSS3 way of doing something like this.

I have a simple logo.png set as background to a div.logo (I want it to be set as a background image not via img src). And when I hover over it I want a smooth transition to "logo-hover.png" which is the same file just in a different color.

Any ideas how to do this nowadays?

My approach would be this: - I create a outer container around div.logo wich position relative. I position two divs inside of it with position absolute on top of each other. The div.hover is set to display:none and if I hover it I use css3 transition to animate it's opacity.

Is this the only way of doing this? I'd actually love to use a pure css way where I don't have to add an additional div with the hover state to the dom itself.

Any ideas on that matter?

Thank you in advance.

解决方案

I actually just came up with a solution for this myself.

I wanted a way to have an image appear to work as if it was a sprite, but keep it super simple.

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

You can see it here:

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

这篇关于图像替换和转换与css3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！