Opacity css transition: CSS: transition opacity on mouse-out?

css переход непрозрачности исчезает фон

спросил 8 лет, 10 месяцев назад

Изменено 4 месяца назад

Просмотрено 308 тысяч раз

Я делаю переход , где он становится прозрачным белым, когда пользователь наводит курсор на изображение.

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

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

 .hover:hover {
  непрозрачность: 0,2;
}

.item-увядание {
  фон: черный;
  непрозрачность: 0,8;
  переход: непрозрачность 0,25 с;
  -moz-transition: непрозрачность 0,25 с;
  -webkit-transition: непрозрачность 0,25 с;
} 

 
Наведите изображение, непрозрачность белого должна быть черной:/
 it/100x100" /> 

• css
• фон
• непрозрачность
• переход

Оберните изображение элементом span с черным фоном.

 .img-обертка {
  отображение: встроенный блок;
  фон: #000;
}
.item-увядание {
  вертикальное выравнивание: сверху;
  переход: непрозрачность 0,3 с;
  непрозрачность: 1;
}
.item-fade:наведите {
  непрозрачность: 0,2;
} 

 <диапазон>
   
 

0

Не переходит в «черный прозрачный» или «белый прозрачный». Он просто показывает, какой цвет находится «за» изображением, то есть , а не цвета фона изображения — этот цвет полностью скрыт изображением.

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

 .ctr {
    маржа: 0;
    заполнение: 0;
    цвет фона: черный;
    отображение: встроенный блок;
}
 

и

 
 .. />
 

http://jsfiddle.net/6xJQq/13/

 .container {
    отображение: встроенный блок;
    отступ: 5px; /*включено заполнение, чтобы увидеть фон, когда размер изображения равен 100%*/
    цвет фона: черный;
    непрозрачность: 1;
}
.контейнер:наведите {
    цвет фона: красный;
}
картинка {
    непрозрачность: 1;
}
изображение: наведите {
    непрозрачность: 0,7;
}
.переход {
    переход: все .25 с облегченным входом-выходом;
    -moz-transition: все .25 легко входят-выходят;
    -webkit-transition: все .25 легко входят-выходят;
}
 

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

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

Так что нельзя сказать, что он белый!

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

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Эффекты появления/затухания с CSS: `непрозрачность` + `видимость` с задержкой CSS

Эффекты появления/затухания с CSS: `непрозрачность` + `видимость` с задержкой CSS

Вернуться на начальную страницу

Это похоже на наш предыдущий тест, за исключением того, что на этот раз мы пытаемся отложить применение `visbility:hidden`, используя чистый CSS. Мы можем сделать это с помощью свойства `transition-delay` и применить разную задержку к переходу непрозрачности (без задержки) и к переходу видимости (задержка равна продолжительности перехода непрозрачности). Спасибо Роману Комарову за указание на эту технику.

Фиктивный контент: Ни одна живая истина не может быть сведена к фразе; такое предложение было бы, в лучшем случае, паспортом, дающим право на въезд в чужую страну, которую потом еще нужно открыть. И в конце концов думаешь, что браться за важные вещи можно только окольными путями или по диагонали — почти исподтишка.

Тестовая ссылка после скрытого содержимого.

Как это работает

Базовый код CSS для этого примера выглядит так:

 .видимый {
  видимость: видимая;
  непрозрачность: 1;
  переход: непрозрачность 2s линейная;
}
.скрытый {
  видимость: скрытая;
  непрозрачность: 0;
  переход: видимость 0s 2s, непрозрачность 2s линейная;
}
 

При отображении элемента (путем переключения на класс visible ) мы хотим, чтобы visibility:visible срабатывало мгновенно, поэтому можно переходить только к свойству opacity .

И при скрытии элемента (путем переключения на класс hidden ) мы хотим отложить объявление visible:hidden , чтобы мы могли сначала увидеть переход затухания. Мы делаем это, объявляя переход для свойства видимости с длительностью 0 с и задержкой.

Как удалить скрытый элемент из потока?

В конце перехода затухания мы хотим удалить скрытый элемент из потока, чтобы он не оставлял пустого места в середине страницы. К сожалению, здесь у нас не так много вариантов:

• display:none не работает, потому что он будет применен мгновенно, и попытка отложить его, как мы сделали с видимостью , не сработает;
• position:absolute имеет точно такую ​​же проблему;
• это не идеально, но мы можем использовать margin-top (можно переходить и таким образом задерживать).

Чтобы использовать margin-top для скрытия элемента, нам нужна более богатая структура HTML:

 <дел>
  <дел>…

 .