CSS3背景位置转换

Question

我知道已经有很多关于这个话题的问题，但我似乎找不到与我有完全相同问题的人。

仅供参考：我使用的是FF 53.0.2

所以这就是我想要实现的：我在背景中包含12种颜色（一年中每个月一个）的渐变，我想使用完全背景大小和背景位置属性来创建效果触发时背景会发生变化（应用程序更改正文上的类）。

问题在于，当我更改时，让我们说background-position:0 500%;到background-position:0 600%;，转换似乎是从background-position:0 0;开始的，所以整个背景滚动到达600％，这没有任何意义所有。

有没有办法调整这个以防止背景位置错误？

有一个片段可以帮助您理解：

var month = 1;
setInterval(function(){
  month++;
  if(month > 12){ month = 1; }
  $('#wrapper').attr('class', '').addClass('month-'+month);
}, 2500);

.box{
  position:relative;display:block;
  width:100%;height:450px;
  
  background: #9c54dc;
	background: -moz-linear-gradient(top,  #9c54dc 0%, #6d65ff 9%, #517fff 18%, #14a0ff 27%, #1ad1c0 36%, #6adc57 45%, #ffd21a 54%, #ffb41a 63%, #ff591a 72%, #ff1a1a 81%, #ff6666 91%, #b233fc 100%);
	background: -webkit-linear-gradient(top,  #9c54dc 0%,#6d65ff 9%,#517fff 18%,#14a0ff 27%,#1ad1c0 36%,#6adc57 45%,#ffd21a 54%,#ffb41a 63%,#ff591a 72%,#ff1a1a 81%,#ff6666 91%,#b233fc 100%);
	background: linear-gradient(to bottom,  #9c54dc 0%,#6d65ff 9%,#517fff 18%,#14a0ff 27%,#1ad1c0 36%,#6adc57 45%,#ffd21a 54%,#ffb41a 63%,#ff591a 72%,#ff1a1a 81%,#ff6666 91%,#b233fc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c54dc', endColorstr='#b233fc',GradientType=0 );

	-webkit-background-size:100% 1200%;
	-moz-background-size:100% 1200%;
	-o-background-size:100% 1200%;
	background-size:100% 1200%;

	background-position:0% 0%;
  
  -webkit-transition:background-position 2s ease;
	-moz-transition:background-position 2s ease;
	-o-transition:background-position 2s ease;
	transition:background-position 2s ease;
}

#wrapper.month-1 .box{
	background-position:0 0;
}

#wrapper.month-2 .box{
	background-position:0 100%;
}

#wrapper.month-3 .box{
	background-position:0 200%;
}

#wrapper.month-4 .box{
	background-position:0 300%; 
}

#wrapper.month-5 .box{
	background-position:0 400%;
}

#wrapper.month-6 .box{
	background-position:0 500%;
}

#wrapper.month-7 .box{
	background-position:0 600%;
}

#wrapper.month-8 .box{
	background-position:0 700%;
}

#wrapper.month-9 .box{
	background-position:0 800%;
}

#wrapper.month-10 .box{
	background-position:0 900%;
}

#wrapper.month-11 .box{
	background-position:0 1000%;
}

#wrapper.month-12 .box{
	background-position:0 1100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper" class="month-1">
  <div class="box"></div>
</div>

Answer 1

背景位置相对于背景的整个大小。

所以，因为你有12个月，每个月占总数的1/12

＆＃13;

＆＃13;

var month = 1;
setInterval(function(){
  month++;
  if(month > 12){ month = 1; }
  $('#wrapper').attr('class', '').addClass('month-'+month);
}, 2500);

＆＃13;

.box{
  position:relative;display:block;
  width:100%;height:450px;
  
  background: #9c54dc;
	background: -moz-linear-gradient(top,  #9c54dc 0%, #6d65ff 9%, #517fff 18%, #14a0ff 27%, #1ad1c0 36%, #6adc57 45%, #ffd21a 54%, #ffb41a 63%, #ff591a 72%, #ff1a1a 81%, #ff6666 91%, #b233fc 100%);
	background: -webkit-linear-gradient(top,  #9c54dc 0%,#6d65ff 9%,#517fff 18%,#14a0ff 27%,#1ad1c0 36%,#6adc57 45%,#ffd21a 54%,#ffb41a 63%,#ff591a 72%,#ff1a1a 81%,#ff6666 91%,#b233fc 100%);
	background: linear-gradient(to bottom,  #9c54dc 0%,#6d65ff 9%,#517fff 18%,#14a0ff 27%,#1ad1c0 36%,#6adc57 45%,#ffd21a 54%,#ffb41a 63%,#ff591a 72%,#ff1a1a 81%,#ff6666 91%,#b233fc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c54dc', endColorstr='#b233fc',GradientType=0 );

	-webkit-background-size:100% 1200%;
	-moz-background-size:100% 1200%;
	-o-background-size:100% 1200%;
	background-size:100% 1200%;

	background-position:0% 0%;
  
  -webkit-transition:background-position 2s ease;
	-moz-transition:background-position 2s ease;
	-o-transition:background-position 2s ease;
	transition:background-position 2s ease;
}

#wrapper.month-1 .box{
	background-position:0 0;
}

#wrapper.month-2 .box{
	background-position:0 8.3%;   /* new value */
}

#wrapper.month-3 .box{
	background-position:0 16.6%;  /* new value */
}

#wrapper.month-4 .box{
	background-position:0 25%; /* new value */
}

#wrapper.month-5 .box{
	background-position:0 33.3%;
}

#wrapper.month-6 .box{
	background-position:0 41.6%;
}

#wrapper.month-7 .box{
	background-position:0 50%;
}

#wrapper.month-8 .box{
	background-position:0 58.3%;
}

#wrapper.month-9 .box{
	background-position:0 66.7%;
}

#wrapper.month-10 .box{
	background-position:0 75%;
}

#wrapper.month-11 .box{
	background-position:0 83.3%;
}

#wrapper.month-12 .box{
	background-position:0 91.6%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper" class="month-1">
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;