CSS过渡褪色不透明背景 [英] css transition opacity fade background

问题描述

我做它淡入透明的白色，当用户徘徊图像的过渡​​。我的问题是，我需要改变颜色，它退色，为黑色。我曾尝试只是简单地添加背景：黑色;到包含过渡，但它不unfurtunately工作类，它仍然衰落成白色透明

I am doing a transition where it fades into transparent white, when a user is hovering an image. My "problem" is that i need to change the color, that it fades to, to black. I have tried just simply adding background:black; to the class that contains the transition, but it does not work unfurtunately, it's still fading into white transparent.

CSS的code我现在用的就是：

The css code i am using is:

.item-food:hover{
   opacity:0.2;
}

.item-fade{
  background:black;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

这里见小JS提琴

推荐答案

包装你的图像到具有背景 SPAN 元素：黑色;

Wrap your image into a SPAN element that has the background: black;

现场演示 的

<span class="imgHolder">
   <img src="http://www.theonecar.com/wp-content/uploads/2013/12/aston-martin-db9-153.jpg" style="width:300px;height:auto;" class="hover item-fade" />
</span>

.imgHolder{
    display:inline-block;
    background:#000;
}
.item-fade{
    vertical-align:top;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.hover:hover{
    opacity:0.2;
}

这篇关于CSS过渡褪色不透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！