CSS3 - фильтр анимированных фоновых изображений

Question

CSS3 - фильтр анимированных фоновых изображений

0

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

body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
    background-image:url("bg_beach.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

Я попытался добавить новый div для фона, но просто испортил все. Может быть, есть способ с jQuery?

Claudio 10 апр. 2014, в 11:14

Источник

Теги:

jquery

html

css3

1 ответ

Ещё вопросы

tmslnz · Accepted Answer · 2014-04-10T07-12-00.000Z

jQuery здесь не поможет. Вы имеете дело только с CSS. Если вы добавляете новый DIV для фонового изображения, вы можете попробовать еще раз. На этот раз выпустите его из потока документов следующим образом:

.mydiv {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image:url("bg_beach.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

#main {
    position: relative;
}

top, bottom, right, left свойства, установленные в 0 действуют как 100% ширина/высота. absolute позиция сохраняет DIV из вашего макета.

Ваш HTML будет выглядеть так:

<body>
    <div class="mydiv"></div>
    <div id="main">
        <!-- page content here -->
    </div>
</body>

Надеюсь, поможет

Я сделал это именно так. Все попадает под фон, кроме моего заголовка, который исчезает при загрузке страницы. Я бы дал вам ссылку, но сайт сейчас только локальный.
Смотрите мое редактирование. Добавьте position:relative #main DIV, куда направляется ваш контент. jsfiddle.net/CAV8f