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;
}

我知道这个问题来自财产'封面'，但在项目中我绝对需要属性background-size。在某个按钮上的“点击”事件中，我通过javascript注入一个真实图像的URL，我使用background-property“cover”，以便创建一个全屏背景图像。我可以保持封面和100％宽度＆amp;最终实际图像的高度但限制了加载程序的大小（当最终图像完全加载时加载程序消失）？

它应该可以有100％的宽度和高度背景图像，直到它完成加载背景中的完整REd颜色的加载gif和顶部的加载gif但是这个加载gif没有采取整个屏幕（非常难看）。

我该如何管理？

Answer 1

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

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

Answer 2

使用下一个代码：

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

它将使您的预加载器居中，不会重复，并且没有背景大小的属性。

Answer 3

由于您知道微调器的宽度和高度，因此请将其设置为原始大小并将其置于其容器中心（在codepen中是窗口）：

#toto {
  width: 196px;
  height: 196px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

https://codepen.io/anon/pen/zEZeLj

Answer 4

html

 <div id="toto" class=""></div>

您需要设置背景样式并保持div大小的CSS

 #toto {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color:#DF2943;
    background-image: 
    url('path/spinner_animation02.gif');
    background-size: 195px 195px;
    background-repeat:no-repeat;
    background-position:center; 
}

希望它有所帮助！

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

4 个答案: