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

问题描述

我正在做一个过渡，当它褪色为透明的白色，当用户悬停图像。我的问题是，我需要改变颜色，它淡入，到黑色。我试过只是简单地添加背景：黑色;

我使用的css代码是：

  .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; 
} 
  

解决方案

将图片封装成 SPAN 元素有 background：black;

  .imgHolder {display：inline-block; background：＃000;}。item-fade {vertical-align：top;不透明度：1;过渡：不透明度0.3s; -webkit-transition：opacity .25s ease-in-out;} hover：hover {opacity：0.2;}  

 < span class =imgHolder> < img class =hover item-fadesrc =http://placehold.it/100x100/cf5/>< / span>  

div>

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.

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;
}

See small js fiddle here

解决方案

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

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

<span class="imgHolder">
   <img class="hover item-fade" src="http://placehold.it/100x100/cf5" />
</span>

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