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>

Answer 2

“黑色透明”或“白色透明”并没有消失。它只显示图像“背后”的任何颜色，即不图像的背景颜色 - 该颜色完全被图像隐藏。

如果要淡化为黑色（ish），则图像周围需要一个黑色容器。类似的东西：

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

和

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

Answer 3

请注意，问题不是white颜色。这是因为它是透明的。

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

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

您可以在其上方放置一个元素，并将该元素的透明度更改为1，同时将图像的透明度更改为.2或您想要的内容。

Answer 4

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 

}

css过渡不透明淡出背景

4 个答案: