Интересный фон!

Фоновое окно на сайте

интересный эффект на простом CSS

Наведите курсор на картинку выше :)

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

Такого эффекта можно добиться обычным позиционированием.

Для этого нам понадобятся два блока. Перый будет с прозрачным фоном, он будет использоваться нами в качестве окна. Сквозь которое можно будет частично просматривать фон-картинку второго блока.

Важно:

1. Для первого блока необходимо применить "position: relactive;", что бы мы могли задать ему свойство z-index равное -1. А также зададим ему прозрачный фон.

2. Для второго блока надо прописать "position:fixed;" Что бы он оставался на месте вне зависимости от прокрутки окна. Так же ему обязательно надо задать свой z-index равный -2.

Поправка:

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

Ниже вы можете увидите тот самый блок-окно, в котором прокручивается фон другого блока!

Ничего не понятно? :) Не волнуйтесь. К этой странице я записал специальный видеоурок, который поможет во всем разобраться.

Для новичков в верстке сайтов возможно будут проблемы с пониманием.

Не волнуйтесь, на тренинге "Верстаем на 5+" 2.0 в вашей голове все станет на свои места. И вы сможете легко делать еще более крутые фишки!