在部分上显示 gif 图像以占用空间

Posted 2023-02-16

【中文标题】在部分上显示 gif 图像以占用空间

【英文标题】：Show a gif image over a section to take up the space

【发布时间】：2012-06-08 08:22:23

【问题描述】：

我是 CSS 的新手。我遇到的问题很简单。

<section>
    <fieldset>
        <div>
            This div block contains the label field and the files.
        </div>
    </fieldset>
</section>

这是我的 html 代码的一部分。在 div 块内，我有一个字段和一些脚本，可以帮助我上传多个文件。我想要做的是在部分或 div 本身上显示一个灰色 div 块，它占用空间并在文件上传时显示 gif 图像。

问题：我不知道如何使用 css。我只在寻找一些可以添加到我的代码中并做我想做的事情的 css 类。我知道如何修复 jquery。

【问题讨论】：

你看到我的回答了吗，请检查一下。

如果对您有帮助，请不要忘记接受答案，作为对他人的基本礼貌......

【参考方案1】：

只需将其插入您想要放置的任何位置。

<div class="loading">
  <img src="loading.gif">
</div>

【讨论】：

如果您只想显示 loading.gif 图像，则不需要任何 css

@killebytes 我认为他需要 CSS，可能是在页面中心显示加载 gif。我猜。

【参考方案2】：

像这样使用html

<div class="load">
      <img src="../path">
    </div>

CSS 是

.loadbackground-color: Gray; filter: alpha(opacity=80); opacity: 0.8; z-index: 10000; text-align:center; position:absolute;

希望对你有帮助

【参考方案3】：

已编辑：demo with gif，在这里，当您单击按钮时会出现弹出窗口，当您单击灰色背景时，弹出窗口会消失。 将您的 gif 包含在 div 弹出窗口中，并根据您的需要对其进行样式设置，这将显示一个居中加载 gif，最初对两个 div 使用 display:none ，然后使用一些 jquery 尝试使它们可见，我希望它可以帮助你

【参考方案4】：

如果我理解正确，您想要一个类似模式弹出窗口的东西，但就在该部分（不是整个页面）上，显示进度图像并防止进一步点击上传字段？如果是这样，那么就使用这个：

<section>    
    <div id="modal" style="display: none"><img src="..."></div>
    <fieldset>
        <div>
            This div block contains the label field and the files.
        </div>
    </fieldset>
</section>

你展示它：

document.getElementById('modal').setAttribute('style', 'height: 100%; width: 100%; z-index: 1000; background-color: Gray; opacity: 0.5');

然后再次隐藏它：

document.getElementById('modal').setAttribute('style', 'display: none');