我可以为透明 .png 图像淡化背景颜色过渡吗？

Question

我可以为透明的 .png 图像设置淡入淡出的背景颜色过渡吗？累了很多方法（使用 css 和 jquery）但是其中 none 有效，有些方法只改变背景颜色而没有淡入/淡出，我需要添加脚本或其他东西才能使用 "transition"?

这是我的代码

$('.a').mouseenter(function(){
    $(this).animate({
        background-color: '#ff0000'
    }, 1000);
}).mouseout(function(){
    $(this).animate({
        background-color: '#000000'
    }, 1000);
});

a {
  background-color: white;
  -o-transition:color 1s ease-out, background 2s ease-in;
  -ms-transition:color 1s ease-out, background 2s ease-in;
  -moz-transition:color 1s ease-out, background 2s ease-in;
  -webkit-transition:color 1s ease-out, background 2s ease-in;
  transition:color 1s ease-out, background 2s ease-in;
}
a:hover { background-color: red; }

<div class="site-branding">
            <a href="http://lavinbylycka.com/" rel="home">
                <img src="http://lavinbylycka.com/images/logobrand.png" class="img-responsive img-center" style="">
            </a>
        </div>

Answer 1

您的路线是正确的，但是 color 是 'forecolor'。你想使用 background-color.

Answer 2

.my-image {
  width : 100px;   /* only for test purposes can be removed */
  height : 100px;  /* only for test purposes can be removed */ 
  transition : 2s;
  background-color : transparent; /* initialize the default color without mouseover */
}

.my-image:hover {
  background-color : red;
}

<img src="http://lavinbylycka.com/images/logobrand.png" alt="Lavin By Lycka" class="img-responsive my-image" />

您可以使用下面的 CSS 来执行您的任务。您使用的 color 用于文本，background 或 background-color 更符合您的需求。

我可以为透明 .png 图像淡化背景颜色过渡吗？

can i make fade in background color transition for transparent .png image?

css

jquery

transition

colors

css-transitions