使用 CSS 将雪添加到页脚 [关闭]答案

【问题标题】：Adding Snow to footer with CSS [closed]使用 CSS 将雪添加到页脚 [关闭]
【发布时间】：2022-01-06 11:26:02
【问题描述】：

圣诞节我想在我的网站页脚中添加雪，就像这张图片

https://assets.stickpng.com/images/5847d74ccef1014c0b5e4806.png

但我不想用图片来做，因为如果我使用图片，它就无法响应，所以我需要一个 css 代码

我不想加雪花，我已经在用这个了：

https://codepen.io/DesignCodeBuild/pen/GyNVbY

我不想让网站看起来“下雪天，网站底部有雪”

【问题讨论】：

请问为什么您的图片无法响应以在底部制作雪床？我知道你也想要动画雪花。我现在卡在图像响应上。
这可能吗？我对前端设计一无所知，差点忘了，如果可以的话，你能告诉我该怎么做吗？
如果我尝试回答会更容易...请稍等...
请将图像添加为图像，而不是代码。另见How to Ask。你需要努力并在这里展示出来。

标签： html css animation

【解决方案1】：

因此，您可以使用 CSS 在所有屏幕上响应图像。

首先在您的 HTML 中，您可以删除图像并只保留一个空的 Div。类决定了您的 CSS 代码将来自哪里（雪地图像）。

<div class="snow-image">
  leave this empty as your image will soon appear here as a background.
</div>

然后在你的 CSS 中你可以有这样的东西......

.snow-image{
background: url=(https://assets.stickpng.com.....);
bacgkround-size cover;
align-items: flex-end;
display: flex;
}

这将完美地保持图像尺寸作为该 Div 的背景，而不是使用 <img> 将图像直接插入到您的 HTML 中。它还将自动调整到任何屏幕宽度。这两个 flex 命令（希望如此）确保雪床图像位于其父 Div 的最底部。希望你可以添加你在 CodePen 找到的用于雪花的 JS 代码，然后你就完成了 :)

当你完成了这一切。如果您看不到雪景图像，则可能意味着 Div 没有高度。因此，您可以将height: --px; 添加到您的CSS 中，其中-- 与您的图像高度完全相同。

【讨论】：

嘿@AlirezaBehnamnik。我不得不改变我上面的答案，所以你可能想再看一遍。