Фоновое изображение медленное увеличение

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

CSS:

body { 
    background-image: url("../img/background.jpg"); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-size:cover; 
    background-position:center-top; 
    background-position-x: 50%; 
    background-position-y: 0%; 
    -webkit-animation: zoomin 5s 1; 
} 

@-webkit-keyframes zoomin { 
    0% { 
     -webkit-transform: scale(1); 
    } 
    100% { 
     -webkit-transform: scale(2); 
    } 

}

источник

2015-06-06 Darkstar

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

<style> 
 
div { 
 
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg"); 
 
    background-repeat:no-repeat; 
 
    background-attachment:fixed; 
 
    background-size:cover; 
 
    background-position:center-top; 
 
    background-position-x: 50%; 
 
    background-position-y: 0%; 
 
    -webkit-animation: zoomin 5s 1; 
 
} 
 

 
@-webkit-keyframes zoomin { 
 
    0% { 
 
     -webkit-transform: scale(1); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(2); 
 
    } 
 

 
} 
 
</style> 
 
<body> 
 
\t <div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div> 
 
</body>

источник

2015-06-06 21:06:46 jaunt

Jaunt, это сработало, но качество изображения, похоже, падает, поскольку оно медленно масштабируется. – Darkstar

Хорошо, попробуйте различные свойства рендеринга изображений. Объяснение этого можно найти на этом [link] (https://css-tricks.com/almanac/properties/i/image-rendering/) – jaunt

Вот простой рабочий пример:

Working Example

Мы в основном просто использовать преобразования: масштаб ; и активировать изменение, добавив класс с jQuery в событие (я выбрал запуск сразу после загрузки DOM).

HTML:

<main id="kb"> 
    <img src="https://iso.500px.com/wp-content/uploads/2014/08/2048-5.jpg" alt="baby elephants" /> 
</main>

CSS:

html, 
body { 
    width:100%; 
    height:100%; 
} 

#kb { 
    width:100%; 
    height:100%; 
    position:relative; 
} 

#kb img { 
    transform-origin: 20% 80%; 
    transition: transform 70s linear; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-left:-1024px; 
    margin-top:-703px; 
} 
#kb img.zoom { 
    transform: scale(2); 
}

JS:

$(document).ready(function(){ 
    $('#kb > img').addClass('zoom'); 
});

Если вы хотите, чтобы увеличить или уменьшить скорость просто изменить значение "перехода" в CSS ,

источник

2015-06-06 21:08:59 HelloWorld

Похоже, вы перезаписали свой пример, или ссылка плохая. В любом случае, там нет демо. – shellscape

Фоновое изображение медленное увеличение

ответ

Смежные вопросы