我正在开发一个网站，该网站包含多个用作内容div背景图像的高分辨率图像。每隔7秒，我就会调用一个函数来设置使用以下代码的背景图片。
document.getElementById('main_content_div').style.background = 'linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)),url('+url+')';
main_content_div的CSS指出应该进行过渡，但没有发生。
position:relative;
height:1080px;
background-color:#000;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)),url('/img/background/bg8.jpg');
background-size:cover;
transition: background-image 3s ease-in-out;
每次背景更新时，我都没有过渡，有时我可以看到渐变出现在图像出现之前，这看起来确实很糟糕。
如果我取出线性渐变，背景图像确实可以很好地过渡，但是我需要渐变叠加层才能使背景图像上的文本可读。
我已经尝试过使用google选择的每个版本，使用选择器之前和之后，使用jQuery animate选项，我没有运气。请告诉我我应该如何做到这一点。