使CSS背景图像连续更改jQuery以模拟闪烁

我希望通过一组相同但颜色变化的背景图像不断循环，以模拟某种颜色变化效果（我尝试过嵌入SVG填充，但它无法根据需要工作）

最初的想法是添加和删除包含背景图像URL的类。但我真的不知道该怎么做？可以循环通过。点击功能，但我需要它不断发生从页面加载

非常感谢您的帮助。非常感谢

HTML:

<h1>Lets make 
    <span class="container--pop">
          <span class="container--pop__container">
                <span class="text--highlight text--highlight-red">this</span>
          </span>
     </span>
change background.
</h1>

JS:

CSS3解决方案：

使用CSS3动画以特定间隔更改背景色

正文{
位置：绝对位置；
宽度：100%；
身高：100%；
顶部：0px；
左：0px；
背景色：红色；
动画名称：changeColor；
动画持续时间：2秒；
动画迭代次数：无限；
}
@关键帧改变颜色{
0%{背景色：红色；}
25%{背景色：黄色；}
50%{背景色：蓝色；}
75%{背景色：绿色；}
100%{背景色：红色；}
}

---

您可以将颜色放在一个数组中，并使用模运算符

%

和

设置间隔

在该数组中循环

var colors=[‘绿色’、‘红色’、‘黄色’、‘蓝色’]；
（功能（）{
var i=0；
函数changeBg（）{
$（'div'）.css（'background-color'，colors[i]）；
i=（i+1）%colors.length；
}
设置间隔（changeBg，1000）；
})();
div{
高度：100vh；
背景颜色：蓝色；
过渡：所有0.3秒都容易进入；
}
罗伊的解决方案是一个很好的开始，但是问题是改变图像的颜色，而不是背景色。由于OP明确表示图像是相同的，并且她正在尝试实现颜色变化效果，因此我建议使用部分透明的覆盖层。我在中使用了before伪元素和Roy的技术

有几件事需要注意：

容器必须是相对位置的，以便绝对定位的覆盖将保持在容器的边界内
任何需要显示在覆盖层顶部的子项也需要是相对位置的。如果从h1中删除相对位置，您将看到它随后显示在覆盖后面
代码如下：

<div class="container">
  <h1>This is on top of the overlay</h1>
</div>


.container {
  position: relative;
  display: block;
  width: 640px;
  height: 480px;
  background: url('http://lorempixel.com/image_output/cats-q-c-640-480-1.jpg') no-repeat;
}
.container:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .3;

  background-color: red;
  animation-name: changeColor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

h1 {
  position: relative;
  color: #fff;
  font-family: arial;
}

@keyframes changeColor {
    0%   {background-color:red;}
    25%  {background-color:yellow;}
    50%  {background-color:blue;}
    75%  {background-color:green;}
    100% {background-color:red;}
}


这是在覆盖的顶部
.集装箱{
位置：相对位置；
显示：块；
宽度：640px；
高度：480px；
背景：url（'http://lorempixel.com/image_output/cats-q-c-640-480-1.jpg")不重复;；
}
.货柜：在{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
不透明度：.3；
背景色：红色；
动画名称：changeColor；
动画持续时间：5s；
动画迭代次数：无限；
}
h1{
位置：相对位置；
颜色：#fff；
字体系列：arial；
}
@关键帧改变颜色{
0%{背景色：红色；}
25%{背景色：黄色；}
50%{背景色：蓝色；}
75%{背景色：绿色；}
100%{背景色：红色；}
}
查看
setInterval（）
这很好，但是我如何通过多少次循环这个数组（事后看来，让它继续这样做是不好的！）哈哈，谢谢你，太棒了。我刚刚更新了if语句，因为它需要curlys和一个缺少的分号，但是非常神奇-谢谢大家：）
（function（）{var I=0；function changeBg（）{//console.log（“更改我的颜色”）；$（'.text--highlight'）.css（'background-image'，colors[I]）；if（counter<8）{I=（I+1）%colors.length；计数器+++；}}setInterval（changeBg，300）；}（）
$('.text--highlight').click(function(){
        if($(this).hasClass('text--highlight-red'))
        {
            $(this).addClass('text--highlight-green').removeClass('text--highlight-red');
        }
        else
        {
            $(this).addClass('text--highlight-orange').removeClass('text--highlight-green');
        }
    });

<div class="container">
  <h1>This is on top of the overlay</h1>
</div>


.container {
  position: relative;
  display: block;
  width: 640px;
  height: 480px;
  background: url('http://lorempixel.com/image_output/cats-q-c-640-480-1.jpg') no-repeat;
}
.container:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .3;

  background-color: red;
  animation-name: changeColor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

h1 {
  position: relative;
  color: #fff;
  font-family: arial;
}

@keyframes changeColor {
    0%   {background-color:red;}
    25%  {background-color:yellow;}
    50%  {background-color:blue;}
    75%  {background-color:green;}
    100% {background-color:red;}
}