Можем ли мы изменить фоновое изображение с помощью CSS3 Animation

так что у меня есть это

<section id="indsection">
</section>

#indsection {
width: 1024px;
background-image: url(images/indexartbg1.png);
float: left;
height: 600px;
background-position: left top;
background-repeat: no-repeat;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: rgba(51,51,51,.4);
border-right-color: rgba(51,51,51,.4);
border-bottom-color: rgba(51,51,51,.3);
border-left-color: rgba(51,51,51,.4);
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}

#indsection:hover {
background-color: rgba(153,0,51,.8);
}

Этот раздел имеет ширину 1024 пикселей и высоту 600 пикселей. Он имеет фоновое изображение "indexartbg1", которое представляет собой несколько абстрактных линий серого цвета, а фон изображения является прозрачным. Я хочу, чтобы при наведении курсора на этот раздел цвет фона раздела менялся с «нет» на «красный» (какой цвет теперь не имеет значения). Я это сделал. В то же время я хочу, чтобы мое фоновое изображение "indexartbg1" было заменено на "indexartbg2", которое по сути является тем же изображением, только вместо серого оно окрашено в белый цвет. Дело в том, что я хочу, чтобы при наведении курсора появлялись новые изображения («белые абстрактные линии») с новым цветом фона. Думаю, получилась бы хорошая анимация и комбо. Кто-нибудь может помочь ?! Спасибо. Нормальное состояние раздела: http://pokit.org/get/?303fc63fc8f14aa4787f705cbf76bb10.jpg Hover section состояние: http://pokit.org/get/?068b39e023b8d8beeed470a8ca9aae01.jpg


html css css-animations css-transitions
person amirFX    schedule 25.08.2014    source источник
comment
Хотя я не думаю, что это возможно в CSS3 с фоновыми изображениями, вы могли бы поиграть с непрозрачностью и добиться аналогичного эффекта. Посмотрите на это   -  person Morklympious    schedule 25.08.2014
comment
На самом деле я только что добавил в #indsection: hover свойство Background-image: url (images / indexartbg2.png); И это работает. Нужно проверить сейчас все снова. Спасибо.   -  person amirFX    schedule 25.08.2014

Ответы (1)


arrow_upward
0
arrow_downward

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

ДЕМО

HTML:

<section id="indsection"></section>

CSS:

#indsection {
    position:relative;
    width: 1024px;
    background-image: url(http://fc06.deviantart.net/fs70/f/2014/237/2/9/indexartbg1_by_aortafx-d7wnc11.png);
    float: left;
    height: 600px;
    background-position: left top;
    background-repeat: no-repeat;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(51, 51, 51, .4);
    border-right-color: rgba(51, 51, 51, .4);
    border-bottom-color: rgba(51, 51, 51, .3);
    border-left-color: rgba(51, 51, 51, .4);
}
#indsection:before{
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    background-color: rgba(153, 0, 51, .8);
    background-image: url(http://fc05.deviantart.net/fs71/f/2014/237/d/a/indexartbg2_by_aortafx-d7wnc0w.png);
    opacity:0;

    -webkit-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}
#indsection:hover:before {
    opacity:1;
}
person web-tiki    schedule 25.08.2014
comment
Переходы @ncubica css поддерживаются IE10 + (caniuse.com/#feat=css-transitions ) для старых браузеров изменение будет внезапным без перехода, но не приведет к сбою. - person web-tiki; 25.08.2014
comment
jsfiddle.net/2NmMD/48 Вот, ребята. Думаю, я понял. Не знаю, правильный ли это путь ?! - person amirFX; 25.08.2014
comment
Я думаю, ваше право, пока не используйте его до IE9. Причина IE8 не имеет надлежащей поддержки псевдоэлементов (конечно, без использования полифиллов) - person ncubica; 26.08.2014
comment
@ web-tiki Работает ли мой метод (просто добавление свойства Background-image: нормально? Я только что протестировал в Chrome, и он недостаточно плавный (или у меня проблемы с компьютером) - person amirFX; 26.08.2014
comment
@amirFX, ваша техника работает, потому что она не гладкая (только при первом наведении), потому что изображение для второго загружается при наведении курсора, и это занимает немного времени. Если вы используете технику, которую я описываю в своем ответе, изображение загружается до вызова состояния наведения и поэтому отображается сразу. - person web-tiki; 26.08.2014
comment
@ web-tiki Ага. Я только что закончил вносить изменения. Теперь это так гладко. Спасибо, мужик. Ты спаситель !!!!! - person amirFX; 26.08.2014