Переход по размеру фона не работает

Я пытаюсь сделать переход на фоновое изображение при наведении. Это мой код до сих пор:

HTML

<div class="item-one"></div>

CSS

.item-one { 
    height: 345px;
    width: 256px;    
    background: url('http://placehold.it/256x345') scroll no-repeat center center;
    background-size: cover;
    -webkit-transition: background-size 1500ms linear;
    -moz-transition: background-size 1500 linear;
    -o-transition: background-size 1500 linear
    -ms-transition: background-size 1500ms linear;
    transition: background-size 1500ms linear;
}

.item-one:hover {
    background-size: 150%;  
}

см. JSFIDDLE

Но у меня это не работает, проверено в разных браузерах. Другие переходы, такие как background-color, работают как положено. Есть ли какие-либо ограничения на переходы по этому свойству?


css css-transitions background-size
person Sonic750    schedule 30.07.2015    source источник
comment
также, как упоминалось в @fsn, у вас отсутствует точка с запятой в 8-й строке   -  person areim    schedule 30.07.2015

Ответы (2)


arrow_upward
24
arrow_downward

Я думаю, что проблема с background-size: cover, когда вы меняете его на

background-size: 100%;

это сработает

JSFiddle

Есть еще один вопрос об альтернативе background-size: cover, который может помочь Есть ли альтернатива фоновому -размер:обложка?

Или какое-то другое решение для таких проблем: используется

person areim    schedule 30.07.2015
comment
Кажется, это не работает в Chrome, поэтому я подумал, что мой собственный проект не работает вместе с вашей ссылкой на JS Fiddle. Firefox показывает нормально, но Chrome не показывает перехода - person Lee; 30.06.2016
comment
Если вы хотите, чтобы он работал с Chrome, вам нужно указать оба параметра. Вот так background-size:100% 100%; - person Carle B. Navy; 26.07.2016

arrow_upward
2
arrow_downward

У вас опечатка:

.item-one { 
...
-o-transition: background-size 1500 linear
...
}

рабочая версия ниже:

.item-one {
    background-size: 50%;
    webkit-transition: background-size 1500ms linear;
    -moz-transition: background-size 1500 linear;
    -o-transition: background-size 1500 linear;
    -ms-transition: background-size 1500ms linear;
    transition: background-size 1500ms linear;
}

.item-one:hover {
    background-size: 100%;
}

работает нормально, раньше не работало из-за 'background-size:cover' :

    **‘cover’:**

    Scale the image, while preserving its intrinsic 
    aspect ratio (if any), to the smallest size such 
    that both its width and its height can completely
    cover the background positioning area.
person fsn    schedule 30.07.2015