我想让背景图像从不可见的不透明度淡入到 50% 的不透明度，并留在那里。
这里有一个类似的问题，但我根本没有跟进，似乎很复杂。也许它会帮助解决我类似问题的人。
我只想在可能的情况下使用 CSS，而不是 JS。这就是我到目前为止所拥有的style.css：
body {
background-image: url("img/me.png");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
}
@keyframes fadeInBG {
0% { opacity: 0.0; }
100% { opacity: 0.5; }
}
您需要将图像 url 更改为其他内容以进行测试。现在，它将动画应用到整个页面正文（包括页面上的任何文本），根本不接触背景，背景始终是 100%，没有动画。我在我的 html 文件中的简单文本只是说：
<h1> Hello world! </h1>
...确实会制作动画。如何仅将动画逻辑定向到背景图像？我希望你可以指定body.background-image而不是，body它会得到解决。
我注意到的另一件事是，一旦动画完成，文本“跳跃”到 100% 的不透明度，它不会像我上面设置的那样保持在 50%。如何解决？
只需在您的 CSS 代码中添加以下代码。
body {
animation-fill-mode: forwards;
}
有用的链接：https ://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
另外，我建议你添加一个 div 来实现它。
.bg-img {
background-image: url("https://media.istockphoto.com/photos/ginger-cat-portrait-picture-id1290233518?b=1&k=20&m=1290233518&s=170667a&w=0&h=C-eVqPpxcxCFqJsykl4rTzq0Kl995ZHCaLB9BgSgEzk=");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
/* add */
animation-fill-mode: forwards;
position: fixed;
inset: 0;
z-index: -1;
}
@keyframes fadeInBG {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}<h1> Hello world! </h1>
<div class="bg-img"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句