css transition opacity fade background

ohfgkhjo 于 2024-01-09 发布在其他

关注(0)|答案(4)|浏览(110)

我正在做一个transition，当用户悬停一个图像时，它会逐渐变成透明的白色。
我的问题是，我需要改变颜色，它褪色，黑色。我已经尝试只是简单地添加background:black;到类，包含transition，但它不工作unfurtantly，它仍然褪色成白色透明。
我使用的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;
}

个字符

css

来源：https://stackoverflow.com/questions/21145621/css-transition-opacity-fade-background

4条答案

按热度按时间

mzsu5hc01#

使用带有黑色背景的span元素 Package 您的图像。

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

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

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

个字符

赞(0）回复(0）举报 2024-01-09

xnifntxz2#

它并不是渐变为“黑色透明”或“白色透明”。它只是显示图像“后面”的任何颜色，而不是图像的背景色--该颜色完全被图像隐藏。
如果你想淡入为黑色，你需要一个黑色的容器围绕图像。比如：

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

字符串
和

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

型

赞(0）回复(0）举报 2024-01-09

u3r8eeie3#

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

字符串

赞(0）回复(0）举报 2024-01-09

sbdsn5lh4#

请注意，问题不是white颜色。这是因为它是透明的。
当一个元素被设置为透明时，它的所有子元素的不透明度，如IE 6 7中的alpha滤镜等，都被改变为新的值。
所以你不能说它是白色！
你可以在它上面放置一个元素，并将该元素的透明度更改为1，同时将图像的透明度更改为.2或任何你想要的透明度。

赞(0）回复(0）举报 2024-01-09

我来回答

css transition opacity fade background

4条答案

相关问题

热门标签

最新问答