html - 错误地加载微调器占用太多空间

Question

我希望在全屏背景图像上使用 197px X 196px 微调器，但使用我使用的代码，它占用了整个空间(巨大!)。

我只是希望它以“正常大小”位于页面的中心，也就是说 197px X 196px

这是一个演示:https://codepen.io/anon/pen/boqzNb

HTML

<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center;background-size:cover;"></div>

CSS

#toto {
  width: 100%;
  height: 100%;
  position: absolute;
}

我知道问题出在属性“cover”上，但在元素中 我绝对需要属性 background-size 。在某个按钮的“点击”事件中，我通过 javascript 向 URL 中注入(inject)一个真实图像，并使用背景属性“cover”创建全屏背景图像。我可以为最终的真实图像保留封面和 100% 的宽度和高度，但在它出现时限制加载器的大小(加载器在最终图像完全加载后消失)吗？

应该有可能有一个 100% 宽度和高度的背景图像，直到它完成加载背景中具有完整红色的加载 gif 和顶部的加载 gif，但是这个加载 gif 不占用整个屏幕(非常难看)。

我该如何管理？

Answer 1

宽度和高度是元素容器的百分比。如果您指定 width: 100%，您要求元素占据容器的 100%，所以是的，它将是整个屏幕。

如果您希望宽度为 197 像素，请使用 width: 197px。高度也是如此。