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

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 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%;
}

<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>