如何使用CSS或Javascript/jQuery平滑地加载背景图像

Question

我只想让身体背景图像从背景颜色平滑加载(淡入(。我有一个白色或透明的背景色，我想让出现一个背景图像的属性(大小封面或任何，重复或不重复(与过渡。

我在这个论坛上搜索了很多，但所有人都要求改变背景或其他有背景的事情，或者要求divs而不是身体。。。

到目前为止，我只有背景图像集：

body {
background: url(../img/back350llll.jpg);
background-repeat:repeat;
}

如果可能的话，我希望它能在2秒钟内出现在CSS、JavaScript或jQuery中。。。

Answer 1

我认为您可以使用@keyframe在CSS3中实现它。

@keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
body {
background-image: url('img_url');
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 10s linear infinite alternate;
}

Answer 2

我的解决方案将首先将其添加到您的css文件中：

body {
background: url(../img/back350llll.jpg);
background-repeat:repeat;
backdrop-filter: contrast(0%) brightness(2);
transition: backdrop-filter 2s;
}

然后在您的JavaScript中添加：

window.addEventListener('load', (event) => {
document.body.style.backdropFilter = ""
});

使用这个解决方案，你会遇到白色的问题，但既然你说白色是你的目标，它可能会对你有用。

如果您想要黑色，请将brightness(2)更改为brightness(0)