Наложение фонового изображения на цвет rgba с переходом CSS3

Ранее сегодня я спросил Наложение фонового изображения на фоновый цвет rgba. Моя цель - иметь div с фоновым изображением, а когда кто-то наводит div, фоновое изображение накладывается на цвет rgba. В ответе было задано решение с :after:

#the-div {
    background-image: url('some-url');
}

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

Теперь я хотел бы иметь то же самое, но с переходом CSS: я хотел бы, чтобы цвет фона исчезал. Я попытался добавить transition: all 1s; в CSS #the-div, но это не сработало. Я также пытаюсь добавить его в #the-div:hover и #the-div:after, но это тоже не сработало.

Есть ли чистый способ CSS для добавления замирания в наложении на div с фоновым изображением?

Ответ 1

Да, это возможно.

демонстрация

.boo {
  position: relative;
  width: 20em; min-height: 10em;
  background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
  transition: background-color 1s;
}
.boo:hover {
  background-color: rgba(0,0,0,.5);
}
.boo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

Что я здесь делаю?

Что я делаю здесь, так это то, что я устанавливаю RGBa background-color на div, за его background-image и переходя этот background-color (его альфа) на :hover. Все это происходит за background-image. Однако я использую background-color: inherit на псевдоэлементе, что означает, что в любой данный момент псевдоэлемент, расположенный над его родительским div (и, следовательно, выше background-image of div) будет иметь тот же самый background-color (что означает, что background-color псевдоэлемента переходит от rgba(0,0,0,0) в rgba(0,0,0,.5) к :hover).

Почему так?

Причина, по которой я не перехожу непосредственно к элементу background-color псевдоэлемента, заключается в том, что поддержка переходов на псевдоэлементах еще не так хороша.

Поддержка переходов на псевдоэлементах

✓ Firefox поддерживает переходы на псевдоэлементах и долгое время поддерживал их, давайте сначала отбросим это.

✗ Текущие версии Safari и Opera не поддерживают переходы по псевдоэлементам.

Chrome поддерживает переходы в псевдоэлементах только начиная с версии 26.

IE10 поддерживает их немного странным образом, что означает что-то вроде:

.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

не будет работать, вам также нужно указать состояние зависания на самом элементе. Вот так:

.boo:hover {}
.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

Дополнительная информация и примеры того, как вы можете переходить к различным свойствам псевдоэлементов, используя этот метод inherit: http://vimeo.com/51897358

ИЗМЕНИТЬ

Переходы непосредственно на псевдоэлементы теперь поддерживаются в Opera с момента перехода на Blink и Safari с 6.1.

Ответ 2

Allthough @Ana техника также хороша и прекрасно работает, позвольте мне немного изменить мой ответ на предыдущий вопрос и добавить переход в этот код. http://jsfiddle.net/Pevara/N2U6B/2/

#the-div {
    width: 500px;
    height: 500px;
    background: url(http://placekitten.com/500/500) no-repeat center center;
    position: relative;
}

#the-div:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    transition: background-color .5s;
}
#the-div:hover:after {
    background-color: rgba(0,0,0,.5);   
}

Что я сделал, так это то, что я определил псевдо-элемент :after в состоянии по умолчанию для div вместо него только в состоянии наведения, но с полностью прозрачным фоном и переходом на цвет фона. При наведении div, я меняю цвет фона псевдоэлемента на менее прозрачный. Благодаря переходу он легко исчезает.

Метод в основном тот же, что и @Ana, но, возможно, немного интуитивно понятен, потому что я не использую background-color: inherit;. Также, если div будет больше, чем фоновое изображение, вы не получите "двойную темноту" по краям, как показано здесь http://codepen.io/anon/pen/cjoHr против здесь http://jsfiddle.net/Pevara/N2U6B/3/