Блог

Главная - Вопросы по программированию - Stellar.js — несколько фонов внутри одного элемента

Stellar.js — несколько фонов внутри одного элемента

#parallax #stellar.js

#параллакс #stellar.js

Вопрос:

Я пытаюсь использовать Stellar.js как несколько фонов внутри одного элемента, такого как содержимое. Все, что я пробовал, вообще не работает..

Вывод по умолчанию выглядит следующим образом:

 		.photo {
			background-attachment: fixed;
			background-position: 50% 0;
			background-repeat: no-repeat;
			height: 450px;
			position: relative;
		}
		.photo span {
			bottom: 0;
			color: white;
			display: block;
			left: 50%;
			margin-left: -640px;
			font-size: 38px;
			padding: 10px;
			position: absolute;
			text-shadow: 0 2px 0 black, 0 0 10px black;
			width: 1280px;
		}
		.summer {
			background-image: url(images/1.png);
		}
		.autumn {
			background-image: url(images/2.png);
		}
		.winter {
			background-image: url(images/3.png);
		}
		.spring {
			background-image: url(images/4.png);
		}  
          <div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
		<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
		<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
		<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
		<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
		<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
		<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
		<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>

Но я хочу, чтобы это было что-то вроде этого

 		.photo {
			background-attachment: fixed;
			background-position: 50% 0;
			background-repeat: no-repeat;
			height: 450px;
			position: relative;
		}
		.photo span {
			bottom: 0;
			color: white;
			display: block;
			left: 50%;
			margin-left: -640px;
			font-size: 38px;
			padding: 10px;
			position: absolute;
			text-shadow: 0 2px 0 black, 0 0 10px black;
			width: 1280px;
            background-image: url(images/1.png), url(images/2.png), url(images/3.png), url(images/4.png);
		}  
 <div class="photo" data-stellar-background-ratio="1.0"><div>content</div></div>

Я совсем новичок в этом и нуждаюсь в некоторой помощи. Может быть, это просто не могло работать так, как я хочу?