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" />

原文由 simon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

用带有黑色背景的 span 元素包裹您的图像。

 .img-wrapper {
  display: inline-block;
  background: #000;
}

.item-fade {
  vertical-align: top;
  transition: opacity 0.3s;
  opacity: 1;
}

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

 <span class="img-wrapper">
   <img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

http://jsfiddle.net/6xJQq/13/

 .container {
    display: inline-block;
    padding: 5px; /*included padding to see background when img apacity is 100%*/
    background-color: black;
    opacity: 1;
}

.container:hover {
    background-color: red;
}

img {
    opacity: 1;
}

img:hover {
    opacity: 0.7;
}

.transition {
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s  ease-in-out;
}

原文由 kasper Taeymans 发布，翻译遵循 CC BY-SA 4.0 许可协议