如何让ReadyMag中CSS背景动画覆盖全屏（含特殊宽高比窗口）

核心问题分析 #

你的动画元素无法铺满特殊宽高比的窗口，核心原因是父级元素（html、body）的默认样式限制，以及当前元素未脱离文档流导致的。即便给元素设置了100%高度，若父级没有明确的高度基准，这个百分比也无法生效。

具体修复步骤 #

• 重置html和body的默认边距、内边距，并强制设置高度为100%，为子元素的高度百分比提供参照基准
• 给.colorchange设置固定定位，脱离文档流，直接覆盖整个浏览器视口（滚动页面时也能保持全屏）
• 确保元素的宽高都设为100%，同时清除自身的内边距和外边距

修改后的完整代码 #

<div class="colorchange"></div>

/* 重置父级元素默认样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 可选，防止页面出现不必要的滚动条 */
}

/* Chrome, Safari, Opera 兼容动画 */
@-webkit-keyframes myfirst {
  0%   {background: #FF85E5;}
  25%  {background: #D8F0FB;}
  50%  {background: #EAFFE9;}
  75%  {background: #FFFEDE;}
  100% {background: #F3E9FF;}
}

/* 标准动画语法 */
@keyframes myfirst {
  0%   {background: #FF85E5;}
  25%  {background: #D8F0FB;}
  50%  {background: #EAFFE9;}
  75%  {background: #FFFEDE;}
  100% {background: #F3E9FF;}
}

.colorchange {
  position: fixed; /* 固定定位，始终覆盖视口 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  /* Chrome, Safari, Opera 兼容动画属性 */
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 20s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
  /* 标准动画属性 */
  animation-name: myfirst;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

补充说明 #

• 动画中原本的left:0px; top:0px;可以删除，因为固定定位已经设置了top和left属性，且动画仅需背景色变化
• 如果ReadyMag自带容器样式导致动画元素被遮挡，可给.colorchange添加z-index: -1（或合适的层级值），让它处于页面内容下方

内容的提问来源于stack exchange，提问作者Shawn Convey