使用 CSS 将雪添加到页脚

Question

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

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

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

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

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

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

Answer 1

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

首先，在您的 HTML 中，您可以删除图片，只留下一个空的 Div。 Class 指示您的 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，其中 -- 与您的图像的像素高度完全相同。

Adding Snow to footer with CSS