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

元素包裹图像。

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

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

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

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

Answer 2

不会褪色为“黑色透明”或“白色透明”。它只是显示图像“后面”的任何颜色，这不是图像的背景颜色 - 该颜色完全被图像隐藏。 如果你想淡入黑色（ish），你需要在图像周围有一个黑色容器。比如：

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

和

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

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

Answer 4

white

颜色。因为它是透明的。

当一个元素设为透明时，其所有子元素的不透明度； IE 6 7 等中的 alpha 过滤器更改为新值。

所以你不能说它是白色的！

您可以在其上方放置一个元素，然后将该元素的透明度更改为

1

，同时将图像的透明度更改为

.2

或您想要的任何内容。