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

Answer 1

.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

Answer 2

它并不是变成“黑透明”或“白透明”。它只是显示出图片“后面”所呈现的颜色，这个颜色并不是图片的背景颜色——该颜色被图片完全隐藏。

如果你想要渐变为黑色（或近似黑色），你需要在图片周围加一个黑色容器。像这样：

.ctr {
    margin: 0; 
    padding: 0;
    background-color: black;
    display: inline-block;
}

并且

<div class="ctr"><img ... /></div>

- Paul Roub

Answer 3

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

Answer 4

请注意，问题不在于“白色”。而是因为它是透明的。

当一个元素被设置为透明时，所有子元素的不透明度和IE 6、7等中的alpha滤镜都会改变为新值。

所以你不能说它是白色！

你可以将一个元素放在它上面，并将该元素的透明度更改为1，同时将图像的透明度更改为0.2或其他任何你想要的值。

- Afzaal Ahmad Zeeshan

---

你的推理是错误的。这是因为图像目前正在被淡化，因为它覆盖了背景颜色。 - Zach Saucier