Затухающее слайд-шоу поверх фонового изображения, как фон страницы - PullRequest
Новая
       19

Затухающее слайд-шоу поверх фонового изображения, как фон страницы

0 голосов
/ 16 марта 2011

Мой сайт в настоящее время имеет одно большое статическое изображение в качестве фонового изображения. Я хотел бы добавить зацикленное слайд-шоу из 3 изображений над фоновым изображением, но все же ниже всего остального. Изображения слайд-шоу - это просто белые png-файлы разного размера с частичной прозрачностью, которые должны плавно переходить друг в друга. Предполагаемый эффект - постоянно выделять различные области фонового изображения (остальная часть страницы останется неизменной).

Что я должен добавить в свой файл CSS, чтобы разместить слайд-шоу над фоновым изображением, но ниже всего остального? В настоящее время для одного изображения у меня есть: 

body {
background-color: #000000;
background-image:url('/images/wallpaper.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top center;
color: #555; 
font: 70%/1.5  Verdana, 'Trebuchet MS', arial, sans-serif;
text-align: center; 
margin: 15px 0;
}

Я нашел приложение jQuery ( Innerfade ) для выцветания изображений. Нужно ли мне добавлять что-либо в мое тело моей страницы, чтобы запустить его, или все будет работать с помощью CSS?

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 16 марта 2011

Вам нужно расположить элементы с разными z-индексами. Например 

#slideshow{
position: relative;
z-index: 1;
}

#otherContent{
position: relative;
z-index: 2
}

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

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

...