css过渡不透明淡出背景

Question

transition当用户悬停图像时,我正在做一个淡入透明白色的地方.

我的问题是我需要将颜色变淡,变为黑色.我试过只是简单地添加background:black;到包含transition它的类,但它不起作用,幸运的是,它仍然逐渐淡入白色透明.

我使用的CSS代码是:

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

<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />

Answer 1

将图像包装到SPAN具有该图像的元素中background: black;

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

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