页面加载时CSS实现背景图单独淡入至50%不透明度

问题根源 #

你原有代码的两个问题本质是两个CSS特性导致的：

• opacity属性会作用于元素本身及其所有子元素，无法单独针对元素的background-image生效，直接给body加透明度动画，必然会把内部所有文本、内容一起变透明。
• CSS动画默认执行完成后会回到元素初始样式，没有配置填充模式的情况下，动画结束就会回弹。

实现代码 #

不需要修改HTML结构，不需要引入JavaScript，直接替换原有CSS即可：

body {
    position: relative;
    min-height: 100vh;
    background-color: #cccccc;
}

/* 独立背景层，与页面内容完全隔离 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    /* 原背景图配置迁移到此处 */
    background-image: url("img/me.png");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    /* 动画配置：5秒淡入，结束后保持最终状态 */
    animation: fadeInBG 5s forwards;
}

@keyframes fadeInBG {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

对应问题解决说明 #

• 针对内容随背景一起透明的问题：将背景图放在body::after伪元素上独立渲染，通过z-index: -1将该层压到所有页面内容的最下方，透明度动画只会作用于这个独立背景层，完全不影响页面内的文本、交互元素。
• 针对动画结束回弹的问题：给动画添加forwards参数（即设置animation-fill-mode: forwards），让动画执行到最后一帧后直接保留最终样式，不会跳回初始状态。

注意：如果你的项目中存在其他设置了负z-index的元素，适当调整伪元素的z-index数值，保证背景层始终处于所有内容下方即可。测试时可自行替换background-image的路径为本地可用资源。

内容的提问来源于stack exchange，提问作者wildcat89