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

你在右边，但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图像的背景颜色过渡中淡入淡出吗？

2 个答案: