Css переход прозрачность фонового фона

Я делаю переход, где он исчезает в прозрачный белый, когда пользователь наводит изображение. Моя "проблема" в том, что мне нужно изменить цвет, который он исчезает, до черного. Я попробовал просто добавить фон: черный; к классу, который содержит переход, но он не работает неудобно, он все еще исчезает в прозрачном белом.

Код css, который я использую:

.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

Ответы

Ответ 1

Оберните свое изображение в элемент SPAN, у которого есть background: black;

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

<span class="imgHolder">
   <img class="item-fade" src="http://placehold.it/100x100/cf5" />
</span>

Ответ 2

Он не исчезает до "черного прозрачного" или "белого прозрачного". Он просто показывает, какой цвет находится позади изображения, а не цвет фона изображения - этот цвет полностью скрыт от изображения.

Если вы хотите потемнеться до черного (ish), вам понадобится черный контейнер вокруг изображения. Что-то вроде:

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

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

Ответ 3

Обратите внимание, что проблема не в цвете white. Это потому, что оно прозрачно.

Когда элемент становится прозрачным, вся его непрозрачность дочернего элемента; альфа-фильтр в IE 6 7 и т.д., изменяется на новое значение.

Итак, вы не можете сказать, что он белый!

Вы можете поместить элемент над ним и изменить прозрачность этого элемента на 1, изменив прозрачность изображения на .2 или то, что вы когда-либо хотели.

Ответ 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 

}