我可以为透明的.png图像做背景色渐变吗?

Question

我可以为透明的。png图像做背景色渐变吗?厌倦了许多方法(与CSS和jquery)，但没有一个工作，一些方法只改变背景颜色没有淡入/淡出，我需要添加脚本或使用"过渡"的东西吗?

这是我的代码

$('.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

.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更适合您的需要。

Answer 2

你说对了，但是color是"前哨"。您想使用background-color