首次在浏览器中显示时，如何让雪层和底层图像完全响应？

Question

圣诞节快到了，所以我安装了一个漂亮的雪脚本，可以通过this link看到。在此示例中，脚本的安装方式使整个页面都被雪覆盖。这非常有效。只需将以下代码放在结束的 body-tag 之前即可。

<script type="text/javascript" src="/js/ador_snow_p.js"></script>
<script>goAdorSnow('schnee', 100000, './wolken1.png', false, true, false, 0.7, 0.5, 0.4);</script>

并在相关页面上添加一些额外的 CSS 和 HTML 代码。

但是，当我想将同一脚本应用于不同页面上的一个特定图像时，需要一些额外的代码。所以顺序是：

设置所涉及图像的正确大小；
获得定义的叠加层以适应所涉及图像的任何大小；
并在更改浏览器时让图像和叠加层完全响应 -window,

我使用了以下代码：

<style>
.snow {
    background:rgba(0, 0, 0, 0.5);
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: white;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}
.container {
    position: relative;
    width: 30%;
    margin-top: 0%;
    margin-right: 3%;
    margin-bottom: 3%;
    margin-left: 0%;
    float: left;
}
.container:hover > .overlay {
    opacity: 1;
}
</style>

<div class="container">
    <img src="https://www.aeternus.eu/images/krokussen_1600X1200.jpg" alt="thumb">
    <div class='snow' id="schnee" ></div>
</div>

此代码在 this page-link.

上实现

如果你访问上面提到的link，你会注意到雪屏最初显示在相关图像上方很多。但是，当更改浏览器 windows-size（使用 Windows Edge）时，您会看到雪覆盖跳转到图像，并且从那时起也停留在那里（它应该这样做！）。当 browser-window 的大小再次更改时，此正确行为仍然存在。请注意：这适用于 Edge，不适用于 Chrome.

总结一下：除了最初的 display/screen，一切似乎都正常。

问题：为了在加载页面时立即在图像上正确显示雪层，应该更改什么？

Answer 1

经过好心人的指点，我终于解决了这个问题。在结束 bodytag 之前，需要添加以下代码：

<script type="text/javascript" src="/js/ador_snow_p.js"></script>
<script>
$( document ).ready(function() { goAdorSnow('schnee', 100000, './wolken1.png', false, true, false, 0.7, 0.5, 0.4); });
</script>

现在 snow-script 行为完全响应，独立于屏幕尺寸和浏览器类型。

首次在浏览器中显示时，如何让雪层和底层图像完全响应？

How to get snow layer and underlying image behave fully responsive when first displayed in browser?

html

css

image

layer

responsive