Css opacity transition: Using CSS transitions — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

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

спросил

Изменено 9 месяцев назад

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

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

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

Код 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 часто используется для создания постепенного появления и исчезновение эффекты. Хотя это отлично работает на первом взгляд, это также может быть причиной некоторых трудно обнаруживаемых ошибок с событиями мыши.

Основная идея состоит в том, чтобы уменьшить непрозрачность элементов . от 1 (что означает полную непрозрачность) до 0 (что означает полную прозрачность) в для того, чтобы затухать элемент. И действительно элемент с

opacity : 0 кажется таким же невидимым, как элемент с видимостью : скрытый . Однако ведет себя как иначе. Элемент с opacity : 0 все еще получает события и т.д. реагирует, когда пользователь нажимает на его ссылки. С другой стороны ссылки закрыты полностью прозрачным элементом, не работают, хотя полностью видно.

Это иллюстрирует следующий первый пример.

 

   Хорошо работающий образец

Наведите указатель мыши на строку Над этой линией

 

Хорошо работающий образец

Наведите указатель мыши на строку Над этой линией

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

(Если вы думаете, что этот пример немного построен, есть более реалистичный, но и более сложный пример ниже.)

 

900 05

   Образец взаимодействия с линком

< /div>

 Неработающая ссылка 

  

    http://www.taccgl.org

  

  

Образец помех
со ссылкой

Нерабочая ссылка
http://www.taccgl.org

Проблема в том, что элемент

c1 перекрывает ссылку. это невидимо из-за непрозрачности : 0 , но он все еще получает щелчки мыши. Таким образом, эти щелчки мыши не попадают на саму ссылку, и, следовательно, ссылка не работает. Добавляя цвет фона и используя непрозрачность:0,5 сразу становится понятно, что происходит:

 

   Образец влияния с ссылкой

 Неработающая ссылка 

  

http://www.taccgl.org

  

  

Образец помех
со ссылкой

Нерабочая ссылка
http://www.taccgl.org

Более реалистичный пример: всплывающее меню

Ниже показан более реалистичный пример всплывающего меню. При наведении курсора мыши на кнопку меню появляется меню. Меню появляется и исчезает с использованием перехода непрозрачности. Вы заметите, что ссылка под кнопкой меню не работает. Это вызвано моим меню, которое есть (хотя и полностью прозрачное из-за opacity:0 и, следовательно, невидимый) и получает щелчки мыши, предназначенные для ссылки.

Кнопка меню Наведите курсор здесь

  Это пример  меню с некоторыми  ссылками

  < a target="new" href="http://www.taccgl.org">

    http://www.taccgl.org

  

 Не работает ссылка 

   taccgl.org»>

    http://www.taccgl.org

  

  

Кнопка меню Наведите курсор сюда

Нерабочая ссылка
http://www.taccgl.org

Обходной путь: сочетание непрозрачности и видимости перехода CSS

Идея решения этой проблемы заключается в использовании обоих переходов на непрозрачность и свойство видимости . Переход непрозрачности для визуальный эффект постепенного появления и исчезновения, а также видимость для также скрытие элемента для щелчков мыши.

Обратите внимание, однако, что пока работает визуальный эффект затухания, элемент меню должен быть виден, иначе эффект будет не быть видимым. Таким образом, при исчезновении элемент должен стать видимым. сразу во время затухания он должен стать видимым только после прекращения перехода непрозрачности. Именно такое поведение указывается с использованием transition:visibility 1s . Подробное описание видимости перехода css и как сочетать это с визуальными эффектами, такими как непрозрачность и другие видят видимость перехода CSS статья.

<стиль >

    .menu1  {

                   непрозрачность : 0;

             видимость : скрыто;

             переход: непрозрачность 1 с, видимость 1 с;

             позиция : абсолютная;

             цвет фона: серебристый;

             padding:20px;

           }

    .mb1   { фоновый цвет:красный; padding:5px }

    .mb1:hover ~ .menu1 { opacity : 1; видимость:видимая}

    .menu1:hover {непрозрачность : 1; visibility:visible}

Кнопка меню Наведите указатель мыши здесь

  Это пример  меню с некоторыми  ссылки

  

    http://www.taccgl.org

  

< /div>

 Теперь рабочая ссылка 

  

    http://www.taccgl. org

  

  

Кнопка меню Наведите курсор сюда

Теперь рабочая ссылка http://www.taccgl.org

Заключение

Использование перехода css только по непрозрачности для затухания элемента приводит к проблеме что ссылки на выцветший элемент остаются активными, в то время как ссылки на закрытые элементы выцветшим элементом не работают. Мы привели примеры такого поведения и обходной путь, использующий как непрозрачность перехода css, так и видимость перехода css.

Статьи блога

Параллаксная прокрутка с 3D-ускорением
Непрозрачность перехода CSS для эффектов затухания
Отображение перехода CSS
Видимость перехода CSS
Анимация всплывающих окон WebGL-HTML5
Трехмерные объекты на HTML-страницах
Деформация и преобразование HTML

Демонстрации

3D Конфигуратор
3D Конфигуратор Продуктов

Учебные разделы

Первый пример
Основные формы
Базовые 3D-модели
Базовые анимации
Цвета и текстуры
Интеграция HTML и WebGL
Временные переходы
Блоки
Встраивание JavaScript
Внешние 3D-модели
Части элементов
HTML-элементы на холсте
Селекторы для множественных переходов 9 0154 Множественные анимации треугольников
Гибкие элементы
Фрагментные шейдеры
Выражения

 

WebGL™ является товарным знаком Khronos Group Inc.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *