Stellar.js - 一个元素内的多个背景

时间:2016-10-10 10:58:17

标签: parallax 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>

我对此很新,需要一些帮助。也许它根本无法正常工作?

0 个答案:

没有答案