CSS过渡褪色不透明背景

本文介绍了CSS过渡褪色不透明背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我做它淡入透明的白色，当用户徘徊图像的过渡​​。我的问题是，我需要改变颜色，它退色，为黑色。我曾尝试只是简单地添加背景：黑色;到包含过渡，但它不unfurtunately工作类，它仍然衰落成白色透明

I am doing a transition where it fades into transparent white, when a user is hovering an image. My "problem" is that i need to change the color, that it fades to, to black. I have tried just simply adding background:black; to the class that contains the transition, but it does not work unfurtunately, it's still fading into white transparent.

CSS的code我现在用的就是：

The css code i am using is:

.item-food: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; }

这里见小JS提琴

推荐答案

包装你的图像到具有背景 SPAN 元素：黑色;

Wrap your image into a SPAN element that has the background: black;

现场演示 的

<span class="imgHolder"> <img src="www.theonecar/wp-content/uploads/2013/12/aston-martin-db9-153.jpg" style="width:300px;height:auto;" class="hover item-fade" /> </span>

.imgHolder{ display:inline-block; background:#000; } .item-fade{ vertical-align:top; opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .hover:hover{ opacity:0.2; }