在调整浏览器窗口大小之前，背景图像不会显示在动画 div 上

Posted 2023-02-21

【中文标题】在调整浏览器窗口大小之前，背景图像不会显示在动画 div 上

【英文标题】：Background image not showing on animated div until browser window resized

【发布时间】：2021-12-25 14:52:51

【问题描述】：

我遇到了一个奇怪的问题 - 我有一个 div，我用 CSS 隐藏了它：

 .thediv 
  width: 100%;
  height: 87%;
  position: fixed;
  overflow: hidden;
  background-image: url(pics/FrameWithBG1280.png);
  background-attachment: fixed;
  background-size: 95% 87%;
  -webkit-background-size: 95% 87%;
  -moz-background-size: 95% 87%;
  -o-background-size: 95% 87%;
  background-repeat: no-repeat;
  background-position: center 84%;
  color: white;
  padding-left: 100px;
  padding-top: 50px;
  top: -110%;

并通过按钮点击显示：

$('.thebutton').click(function() 
   $('.thediv').animate(top:'11%')
);  

这很好用，除了 div 在我调整浏览器窗口大小之前没有它通常的背景图片。当我调整浏览器窗口大小时，会出现背景图像。在 Chrome、Mozilla、Opera 和 Edge 中测试 - 都一样。

任何想法为什么会发生？

【问题讨论】：

最好能说明您使用的是哪种浏览器。

另外请分享所有重现错误的代码（包括 CSS）

您是否在等待所有内容加载完毕？

最好使用.hide()。

在 chrome、mozila、opera 和 edge 中测试。我在问题中添加了所有相关代码。是的，我正在等待一切加载。关于 .hide() - 确定在这种情况下我会在哪里使用它。感谢您的所有回复

【参考方案1】：

相对必须基于绝对。

在您的代码中，所有值都是相对的（百分比）。当“调整大小”时，脚本会将绝对单位的值（px。在 DevTools 中检查）添加到该块和/或其祖先，因此百分比开始起作用并影响图像！

解决方案：将绝对单位的值添加到块和/或其祖先。您还可以使用 vh 和 vw 来确定对浏览器视口大小的依赖关系。

你不能得到无、不确定或无限的一部分。