使全屏背景图像在 5 秒后出现答案

【问题标题】：Making fullscreen background image appear after 5 seconds使全屏背景图像在 5 秒后出现
【发布时间】：2020-08-13 18:51:01
【问题描述】：

我在 css 中有想要制作动画的背景图片，因此它会在 5 秒后立即出现（没有过渡） CSS：

body {
font-family: 'Roboto', sans-serif;
background-color: #0d0d0d;
color: #dedede;
animation: none;
background:url(img/cat.gif) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

前台会有一个<table>元素。

【问题讨论】：

标签： html css image background opacity

【解决方案1】：

您的问题有些不清楚，但我没有评论的声誉，为了要求您提供更多细节，但是...根据您提供的信息，我推断出以下内容：

您希望背景图像在 5 秒后显示在您的 body 上，没有过渡（如 toggle）。

鉴于你没有标记任何framework/library，我将在 vanilla JS 中执行此操作。

不幸的是，我认为您需要创建一个脚本来执行此操作，除非我不熟悉的原始 CSS 解决方案是可能的。

您可以做的是创建一个“背景 div”，它将位于您的页面上，并为其提供 fixed 位置属性，以及它将占据整个屏幕的扩展性质-span。

这是一个 sn-p（我没有你的本地 cat 文件，所以用网络链接即兴创作）：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title></title>
<style>
.popout-div {
    font-family: 'Roboto', sans-serif;
    background-color: #0d0d0d;
    color: #dedede;
    animation: none;
    background:url("https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
</style>

<script>
function showBackground() {
  var element = document.getElementById("page-bg");
  element.classList.add("popout-div");
}

var counter = 0;
var interval = setInterval(function() {
    counter++;
    if (counter == 5) {
        showBackground();
        clearInterval(interval);
    }
}, 1000);
</script>
</head>
<body>
    <div id="page-bg"></div>
        <table>
            <thead>
                <tr>
                    <th>Some</th>
                    <th>Table</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Some</th>
                    <th>Table</th>
                </tr>
            </tbody>
        </table>
</body>
</html>

除了.popout-div 中的位置属性外，其他属性基本保持不变。 z-index 用于表示默认情况下此图像应位于页面内容下方（-1），如果您希望它显示在内容之上，请将其设置为更高的值。

否则脚本会在页面加载时启动，以倒计时。 5 秒后，将调用 showBackground()，将类应用于 page-bg div。

有用的资源：

1) z-index

2) layout

3)classlist

【讨论】：

是的！太感谢了。这正是我想要的。我是这个平台的新手，对网站建设有点陌生，所以下次我会知道要指定什么。

【解决方案2】：

您写道，您有一个背景图像，您想对其进行动画处理，使其在 5 秒后出现。我的建议是使用两个关键帧并让您的动画运行 5 秒：

@keyframes yourAnimation{
0%{
    opacity: 0;
    }
100%{
    opacity: 1;
    }
}

.elementToAnimate{
animation: yourAnimation 5s initial 0s linear;
}

此动画可以更改，例如，如果您希望背景图像只是淡入，您可以在 10%、20%、30% 等处添加更多关键帧，以逐渐增加图像的不透明度。

如果您是 CSS 动画的新手：您想要制作动画的 bg img 是 .elementToAnimate，因此您想为您的 bg img 分配一个类或 ID，并用它替换 .elementToAnimate。

希望对你有帮助！

【讨论】：